Reputation: 617
Handlebars js ajax form result and pagination offset

I want fetch content from database and using Handlebars and ajax for this program. When submit form get ajax data from database and I have pagination for content result. If get all data from database with json format my pagination work and not have problem but I do not need it. I wand have offset and paginate content and after fetch ajax first page result by submit form then get content from database on click another page number or click prev or next button. My code for this program this is:
                <!doctype html>
            <html lang="en">

            <head>
                <meta charset="UTF-8">
                <title>Handlebars Pagination</title>
                <link href="main.css" rel="stylesheet" />
                <script src="jquery.min.js"></script>
                <script src="handlebars.min.js"></script>
                <script src="functions.js"></script>
            </head>

            <body class="container">

                <div id="posts"></div>


            <h3>Filter Content</h3>
                <form action="" id="filter-form" name="filter-form" method="post">
                       <input type="text" id="searchText" name="searchText"/>
                       <input type="submit" value="submit"/>
                </form>
            <div id="acfilter-content">

                <div id="posts"></div>




                <script id="post-template" type="text/x-handlebars-template">
                    <div class="score-structural score-column2-wideright search-listings post">
                        <div class="score-right">
                            <h4>{{record_count}}</h4>
                            <h5 style="z-index: 1;">
                                <a href="#"> {{ title }} </a>
                            </h5>
                            <p style="z-index: 1;"> {{ desc }} </p>
                        </div>
                    </div>
                    <hr>
                </script>

                <script id="pagination-template" type="text/x-handlebars-template">
                    <ul class="pagination">
                        <li class="pagination-prev"><a href="#">&laquo;</a></li>

                        {{#each pages}}
                        <li class="pagination-page" data-page="{{this}}"><a href="#">{{this}}</a></li>
                        {{/each}}

                        <li class="pagination-next"><a href="#">&raquo;</a></li>
                    </ul>
                </script>



            <script>

                 $(function () {
                    var opts = {
                        pageMax: 2,
                        postsDiv: $('#posts'),
                        dataUrl: "index.php"
                    }

                    function loadPosts(posts) {
                        opts.postsDiv.empty();
                        posts.each(function () {
                            var source = $("#post-template").html();
                            var template = Handlebars.compile(source);
                            var context = {
                                title: this.title,
                                desc: this.body,
                            };
                            var html = template(context);
                            opts.postsDiv.append(html);
                        });
                        hidePrev();
                    }

                    function hidePrev() { $('.pagination .pagination-prev').hide(); }
                    function showPrev() { $('.pagination .pagination-prev').show(); }

                    function hideNext() { $('.pagination .pagination-next').hide(); }
                    function showNext() { $('.pagination .pagination-next').show(); }

                    function paginate(page,pageCount) {
                        var source = $("#pagination-template").html();
                        var template = Handlebars.compile(source);
                        var context = { pages: range(page,pageCount) };
                        console.log(range(page,pageCount));
                        var html = template(context);
                        var paginationTag = opts.postsDiv.parent().find(".pagination");
                        paginationTag.length > 0 ? paginationTag.replaceWith(html) : opts.postsDiv.after(html);

                        function changePage(page) {
                            pageItems.removeClass('active');
                            pageItems.filter('[data-page="' + page + '"]').addClass('active');
                            loadPosts(data.slice(page * opts.pageMax - opts.pageMax, page * opts.pageMax));
                            paginate(page,pageCount);
                            if (gotoPageNumber <= 1) {
                                hidePrev();
                            }
                        }

                        var pageItems = $('.pagination>li.pagination-page');
                        var pageItemsLastPage = $('.pagination li').length - 2;
                        pageItems.removeClass('active');
                        pageItems.filter('[data-page="' + page + '"]').addClass('active');

                        pageItems.on('click', function () {
                            getDataPageNo = this.getAttribute('data-page')
                            console.log(getDataPageNo)
                            changePage(getDataPageNo);
                            if (getDataPageNo == 1) {
                                hidePrev()
                            }
                            else if (getDataPageNo == pageItemsLastPage) {
                                hideNext();
                            }
                            else {
                                showPrev();
                                showNext();
                            }
                        });

                        $('.pagination>li.pagination-prev').on('click', function () {
                            gotoPageNumber = parseInt($('.pagination>li.active').attr('data-page')) - 1;
                            changePage(gotoPageNumber);
                        });

                        $('.pagination>li.pagination-next').on('click', function () {
                            gotoPageNumber = parseInt($('.pagination>li.active').attr('data-page')) + 1;
                            if (gotoPageNumber > pageCount) {
                                gotoPageNumber = 1;
                                showPrev();
                            }
                            changePage(gotoPageNumber);
                        });
                    }

                    $("#filter-form").submit(function(e) {

                    var pageNumber = parseInt($('.pagination>li.active').attr('data-page'));
                    if(!pageNumber) pageNumber = 1;
                    var searchText = arasjQuery('#searchText').val();   
                    $.ajax({
                        dataType: 'json',
                        url: opts.dataUrl,
                        type: 'POST',
                        data: {
                              'searchText': searchText,
                              'pageNumber': pageNumber                                             
                        },
                        success: function (response_json) {

                            if(response_json){
                                console.log(response_json);
                                data = $(response_json.records.page);
                                //dataCount = data.length;
                                dataCount = response_json.recourd_count;

                                pageCount = Math.ceil(dataCount / opts.pageMax);
                                console.log(pageCount);
                                if (dataCount > opts.pageMax) {
                                    paginate(1,pageCount);
                                    posts = data.slice(0, opts.pageMax);
                                } else {
                                    posts = data;
                                }
                                loadPosts(posts);
                            }else{
                               alert("No Data"); 
                            }

                        }
                    });

                        e.preventDefault(); // avoid to execute the actual submit of the form.
                    });



                });

            </script>

            </div>


            </body>

            </html>
Upvotes: 1
Answers (1)

Saber
Reputation: 617
I can do it with coding custom runAjax function and call it on submit form and inside of changePage function and it's work now
Upvotes: 0
Handlebars js ajax form result and pagination offset

Answers (1)

Related Questions
