Pagination Functionality using handlebars js

Question

DEMO

I'am developing a Pagination Functionality using handlebars js and fetching the data from JSON.

First 5 results will be shown on page load.
on click of next pagination another set of 5 results will be displayed and so on.
If i have total number of results 100 by displaying each 5 Results in page. Page Numbers will be 1 of 20.
if the pagination has more then 5 number of Pages , I want to display "1,2,3 ... last Page Number (20)" same vice versa
on load Previous Button Should be hidden when ever next page is clicked it has to be enabled.

Request to you please look into this and give some advice / suggestion on this.

Should be Like Below

Appreciate your kind help !

Thanks

some code sample :

    $(function () {
        var opts = {
        pageMax: 5,
        postsDiv: $('#posts'),
        dataUrl: "searchResult.json"
    }

    function range(i) { return i ? range(i - 1).concat(i) : [] }

    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);
        });
    }

    function paginate(pageCount) {
        var source = $("#pagination-template").html();
        var template = Handlebars.compile(source);
        var context = { pages: range(pageCount) };
        var html = template(context);
        opts.postsDiv.after(html);

        function changePage(pageNumber) {
            pageItems.removeClass('active');
            pageItems.filter('[data-page="' + pageNumber + '"]').addClass('active');
            loadPosts(data.slice(pageNumber * opts.pageMax - opts.pageMax, pageNumber * opts.pageMax));
        }

        var pageItems = $('.pagination>li.pagination-page');

        pageItems.on('click', function () {
            changePage(this.getAttribute('data-page'));
        }).filter('[data-page="1"]').addClass('active');

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

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

    $.ajax({
        dataType: 'json',
        url: opts.dataUrl,
        success: function (response_json) {
            data = $(response_json.records.page);
            dataCount = data.length;

            pageCount = Math.ceil(dataCount / opts.pageMax);

            if (dataCount > opts.pageMax) {
                paginate(pageCount);
                posts = data.slice(0, opts.pageMax);
            } else {
                posts = data;
            }
            loadPosts(posts);
        }
    });
});

Pagination Functionality using handlebars js

1 Answers