Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Passcode:
Jquery pagination with next and previous buttons
20291 Views
Introduction 
In this example, According to the items(div) the page number will generated.when you click the page number ,the content related to that page shown.Here i am showing two item per page.If you want to show more items per page you have to make simple changes in given code.When the number of divs increased, jquery automatically generates the page numbers.And also i limit the page number with next and previous button.

Preview of Pagination at starting(Without prev button)
:



Preview of Pagination at middle(With prev and next button):



Preview of Pagination at End(Without next button):

Html
<!DOCTYPE html>
<html>

<head>
    <style>
        .prev {
            display: none;
            float: left;
            margin: 5px 10px;
        }
        #divPages {
            float: left;
        }
        #divPages div {
            float: left;
            margin: 5px 10px;
        }
        .next {
            float: left;
            margin: 5px 10px;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            var totalrows = $(".divControl").length;
            var pageSize = 2;
            var noOfPage = totalrows / pageSize;
            noOfPage = Math.ceil(noOfPage);
            for (var i = 1; i <= noOfPage; i++) {
                $("#divPages").append('<div class="page">' + i + '</div>');
            }
            var totalPagenum = $("div.page").length;
            if (totalPagenum > 3) {
                $("div.page").hide();
                for (var n = 1; n <= 3; n++) {
                    $("div.page:nth-child(" + n + ")").show();
                }
            }
            $("div.divControl").hide();
            for (var j = 1; j <= pageSize; j++) {
                $("div.divControl:nth-child(" + j + ")").show();
            }
            displayevent();
            $("div.next").click(function () {
                if ($("div.selected:last").nextAll('div.page').length > 3) {
                    $("div.selected").last().nextAll(':lt(3)').show();
                    $("div.selected").hide();
                    displayevent();
                    //lastposevent();
                    $("div.prev").show();
                    $("div.next").show();
                } else {
                    $("div.selected").last().nextAll().show();
                    $("div.selected").hide();
                    displayevent();
                    $("div.next").hide();
                    $("div.prev").show();
                }
            });
            $("div.prev").click(function () {
                if ($("div.selected:first").prevAll('div.page').length > 3) {
                    $("div.selected").first().prevAll(':lt(3)').show();
                    $("div.selected").hide();
                    $("div.prev").show();
                    $("div.next").show();
                    displayevent();
                } else {
                    $("div.selected").first().prevAll().show();
                    $("div.selected").hide();
                    $("div.prev").hide();
                    $("div.next").show();
                    displayevent();
                }
            });
            $("div.page").click(function () {
                var currentPage = $(this).text();
                $("div.divControl").hide();
                for (var k = (currentPage * 2) - 1; k <= (currentPage * 2); k++) {
                    $("div.divControl:nth-child(" + k + ")").show();
                }
            });
        });

        function displayevent() {
            $("div.page").each(function () {
                if ($(this).css('display') === 'block') {
                    $(this).addClass('selected');
                } else {
                    $(this).removeClass('selected');
                }
            });
        }
    </script>
</head>

<body>
    <div class="divControl">Abi</div>
    <div class="divControl">Anant</div>
    <div class="divControl">balraj</div>
    <div class="divControl">devi</div>
    <div class="divControl">manasha</div>
    <div class="divControl">mani</div>
    <div class="divControl">nimmi</div>
    <div class="divControl">god</div>
    <div class="divControl">gopal</div>

    <div class="prev">prev</div>
    <div id="divPages"></div>
    <div class="next">next</div>
</body>

</html>
Demo 
Note 
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details