Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Passcode:
Simple pagination in jquery example in Components of JQuery Examples
6059 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 change pageSize variable value.When the number of divs increased, jquery automatically generates the page numbers.

Preview of Simple Pagination:
Example code for Simple Pagination
<!DOCTYPE html>
<html>

<head>
    <style>
        #divPages {
            float: left;
        }
        #divPages div {
            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>');
            }
            $("div.divControl").hide();
            for (var j = 1; j <= pageSize; j++) {
                $("div.divControl:nth-child(" + j + ")").show();
            }
            $("div.page").click(function () {
                var currentPage = $(this).text();
                $("div.divControl").hide();
                for (var k = (currentPage * pageSize) - (pageSize-1); k <= (currentPage * pageSize); k++) {
                    $("div.divControl:nth-child(" + k + ")").show();
                }
            });
        });
    </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 id="divPages"></div>
    <!-- to bind 123 number-->
</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