Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Simple pagination in jquery example in Components of JQuery Examples
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>

        #divPages {
            float: left;
        #divPages div {
            float: left;
            margin: 5px 10px;
    <script src="">
        $(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>');
            for (var j = 1; j <= pageSize; j++) {
                $("div.divControl:nth-child(" + j + ")").show();
            $("").click(function () {
                var currentPage = $(this).text();
                for (var k = (currentPage * pageSize) - (pageSize-1); k <= (currentPage * pageSize); k++) {
                    $("div.divControl:nth-child(" + k + ")").show();

    <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-->

Previous Topics
Previous lessons of current book.
Best Lessons of "JQuery Examples"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details