Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Passcode:
Components
Bx Photo slider example program Simple pagination in jquery example Jquery pagination with next and previous buttons Accordion function using jquery Search range of html content by id using jquery Photo slider with jquery example Using slide function with + and - sign .
Components [cont'd]
Using slide function with down and right arrows
Jquery Syntax
How to get url of current page in jquery How to limit the number of words in paragraph by jquery
Errors in jquery
Nth child jquery not working sharepoint Event.returnValue is deprecated. Please use the standard event.preventDefault() instead
Jquery functions
How to count number of divs in jquery How to select number of elements with next() How to convert integer number from float in jquery How to select number of previous divs with prev() How to show div in jquery How to hide div in jquery How to show div on mouseover in jquery
Jquery functions [cont'd]
How to show div on hover in jquery How to hide div using jquery on page load How to remove div using jquery How to clear content in jquery How to select parent element in jquery How to addclass and removeclass in jquery How to run jquery when page loads
Jquery functions [cont'd]
How to use jquery to click on a element How to add class in jquery How to remove class in jquery For loop in jquery example For each in jquery example On in jquery example How to call a jquery function on keypress
Jquery functions [cont'd]
Jquery bind click event example If in jquery example This in jquery example Toggle in jquery example Mouseup example jquery Jquery mousedown example How to select child elements in jquery
Jquery functions [cont'd]
How to select first child in jquery How to select last child in jquery How to select sibling in jquery How to select parent of parent in jquery How to give css in jquery How to give multiple css in jquery Slideup in jquery example
Jquery functions [cont'd]
Slidedown in jquery example Slideup and slidedown in jquery examples How to show hide div in jquery How to select next element in jquery How to select previous element in jquery How to add html in jquery How to add text in jquery
Jquery functions [cont'd]
Append in jquery example Prepend in jquery example Append and prepend in jquery example Fadein in jquery example Fadeout jquery example
Jquery pagination with next and previous buttons
32848 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 
Click here for demo
Note 
simple pagination click here
Previous Topics
Previous lessons of current book.
Components of JQuery Examples
Components of JQuery Examples
Best Lessons of "JQuery Examples"
Top lessons which are viewed more times.
Components of JQuery Examples
Jquery functions of JQuery Examples
Components of JQuery Examples
Jquery functions of JQuery Examples
Components of JQuery Examples
Jquery functions of JQuery Examples
Jquery Syntax of JQuery Examples
Components of JQuery Examples
Jquery Syntax of JQuery Examples
Jquery functions of JQuery Examples
  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