How to use SimplePagination jquery

Question

I am trying to use simplePagination on my code. (I am developing using MVC4 C#)

Let say I have this bunch of codes

<table>
    <thead>
        <tr>
            <td><input type="checkbox" name="select-all" id="select-all" /></td>
            <td style="text-align: left">Name</td>
            <td style="text-align: left">Created By</td>
            <td style="text-align: left">Created Date</td>
        </tr>
    </thead>
    <tbody>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Window</td>
            <td>John</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Door</td>
            <td>Chris</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Floor</td>
            <td>Michael</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Car</td>
            <td>James</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Bike</td>
            <td>Steven</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
    </tbody>
</table>

*Note: In the code above I add class 'post' to each 'tr' (row in table body). And these rows are generated dynamically by for loop (C#)

And from the documentation if I want to use simplePagination I have to declare the jquery like this:

$(function() {
    $(selector).pagination({
        items: 100,
        itemsOnPage: 10,
        cssStyle: 'light-theme'
    });
});

Actually I am not pretty sure how to use (*how to call) this simplePagination. It's my first time dealing with pagination.

I already tried to put this code after the table

<div class="pagination-page"></div>

And change 'Selector' inside jquery calling method with '.pagination-page', but it didn't work.

$(function() {
    $('.pagination-page').pagination({
        items: 100,
        itemsOnPage: 10,
        cssStyle: 'light-theme'
    });
});

1. Should I replace 'Selector' with a class name? If yes, how do I do that?
2. Second is how do I declare this simplePagination so that it will show only 2 rows (Only 2 class 'Post') for each page?

*Means in the first page it will only show

+--------------------------------------------------+
| [] |  Name  | CreatedBy | CreatedDate            | 
|--------------------------------------------------| 
| [] | Window | John      | 01/01/2014 12:00:00 AM | 
| [] | Door   | Chris     | 01/01/2014 12:00:00 AM | 
+--------------------------------------------------+

The second page will show

+--------------------------------------------------+
| [] |  Name  | CreatedBy | CreatedDate            | 
|--------------------------------------------------| 
| [] | Floor  | Michael   | 01/01/2014 12:00:00 AM | 
| [] | Car    | James     | 01/01/2014 12:00:00 AM | 
+--------------------------------------------------+

So on..

*Note: I am not sure how this jquery will detect how many items we have and generate number of pages and put those items accordingly.

Answer 1

One thing to note about this plugin, which a few people may get confused about, is that it technically doesn’t implement pagination itself. It generates a page navigator and provides the means, via jQuery events, to simply hook it up to our own pagination functionality.

Assuming you've followed the steps 1 (and 2 if you want the CSS styling) required from the simplePagination link you included in your question then the following jQuery will do what you need:

jQuery(function($) {
    // Consider adding an ID to your table
    // incase a second table ever enters the picture.
    var items = $("table tbody tr");

    var numItems = items.length;
    var perPage = 2;

    // Only show the first 2 (or first `per_page`) items initially.
    items.slice(perPage).hide();

    // Now setup the pagination using the `.pagination-page` div.
    $(".pagination-page").pagination({
        items: numItems,
        itemsOnPage: perPage,
        cssStyle: "light-theme",

        // This is the actual page changing functionality.
        onPageClick: function(pageNumber) {
            // We need to show and hide `tr`s appropriately.
            var showFrom = perPage * (pageNumber - 1);
            var showTo = showFrom + perPage;

            // We'll first hide everything...
            items.hide()
                 // ... and then only show the appropriate rows.
                 .slice(showFrom, showTo).show();
        }
    });



    // EDIT: Let's cover URL fragments (i.e. #page-3 in the URL).
    // More thoroughly explained (including the regular expression) in: 
    // https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment/index.html

    // We'll create a function to check the URL fragment
    // and trigger a change of page accordingly.
    function checkFragment() {
        // If there's no hash, treat it like page 1.
        var hash = window.location.hash || "#page-1";

        // We'll use a regular expression to check the hash string.
        hash = hash.match(/^#page-(\d+)$/);

        if(hash) {
            // The `selectPage` function is described in the documentation.
            // We've captured the page number in a regex group: `(\d+)`.
            $(".pagination-page").pagination("selectPage", parseInt(hash[1]));
        }
    };

    // We'll call this function whenever back/forward is pressed...
    $(window).bind("popstate", checkFragment);

    // ... and we'll also call it when the page has loaded
    // (which is right now).
    checkFragment();



});

You can find a running example here, and a more thorough guide on simplePagination here if you want to more thoroughly understand how this all actually works.

EDIT: Added a section of code to handle URL fragments (on reload and on back/forward) as Mike O'Connor highlighted the need for. You can see a live example of URL fragment handling here.

EDIT 2: If you need cross-browser compatibility for the back/forward fragment updating (i.e. IE11...), include the History.js script before implementing the above code. Thanks to Mike O'Connor for that :)

EDIT 3: If you're dynamically adding or removing content you'll need to manually update the paginator to reflect these changes. I've whipped up an example for that too. You can see it running here.

Answer 2

Ok I've tested Bilal Akil's jQuery(function($) and it was a good start for me--- thanks Bilal. It works, but with some deficiencies. For one, if you go to his first link and click on a page 2 then that number appears in the location box as "http://bilalakil.github.io/bin/simplepagination/#page-2"--- in the #page-2. But if you copy that entire URL and paste it into the location box of another tab or window to simulate someone linking to page 2, then it flat doesn't work; you'll find yourself on page 1. Or after you click on the page 2 button and go to page 2 you can just reload the page; you'll find yourself on page 1.

I would have commented but I need to leave some code here. Here's my modified jQuery(function($) with the fix of that particular problem:

  var items = $("#content .page");
  var numItems = items.length;
  var hashPageNum = getPageNum();  //code for getPageNum() is below
  items.hide().slice(hashPageNum-1, hashPageNum).show();

  // now setup pagination
  $("#pagination").pagination({

    items: numItems,
    itemsOnPage: 1,
    cssStyle: "light-theme",
    onPageClick: function(pageNumber) {
    items.hide().slice(pageNumber-1, pageNumber).show();
    }

  });
  $('#pagination').pagination('drawPage', hashPageNum);

I should have prefaced this by saying that the selector scheme that I'm using for the page elements is as follows:

<div id="pagination"></div>
<table id="content"><tbody><tr class="page"><td>...

And I'm using just perPage=1, one <tr> per page, but the essential difference is this line:

items.hide().slice(hashPageNum-1, hashPageNum).show();

It is the main fix for that problem about links with the #page-n on the end not working. The last line is also necessary for that purpose as it sets the pagination bar with page n shown selected.

The second problem is the utter dysfunction of the back and forward buttons with Bilal's bare code. If you put the pagination bar at the bottom of a long page readers are surely going to want to use the browser's built-in page navigation. EDIT: Bilal has since updated his code to remove these problems.

So here's a function that has an essential detail toward that end. It's called in the code above but in one other place too:

function getPageNum(){
  var hashtag = parent.location.hash;
  var hashPageNum = 1; //default
  if (hashtag == '#page-1') {
    hashPageNum=1;
  } else if (hashtag == '#page-2'){
    hashPageNum=2;
  } else if (hashtag == '#page-3') {
    hashPageNum=3;
  } else if (hashtag == '') {
    hashPageNum=1;
    parent.location.hash = '#page-1';
  };
  return hashPageNum;
};

OK, I comprehend that I have not been sophisticated, but the essential detail is that if parent.location.hash is null then the function returns 1, for page 1--- not null.

There is now one other step, and that's to weaponize window.onpopstate, which is an HTML5 thing (hopefully this won't cause a problem with non-html5 browsers... comment if you know all about that please):

window.onpopstate = function(e){
  var pagenum = getPageNum();
  $("#content .page").hide().slice(pagenum-1, pagenum).show();
  $('#pagination').pagination('drawPage', pagenum);
};

And with that I appear to be done. I can copy the URL's with the #page-n suffixes and launch them elsewhere and they work. The forward and back buttons work. Note that the 'drawPage" bit in the code immediately above is simply to adjust the indication in the pagination bar.

OK, this is an edit on 2/16/2015... to show a fix for the IE11 problem which is discussed in the comments. I didn't edit the code above because perhaps you won't want to do the fix this way, though it does seem to work.

First go to this github project and then type "t" for files (hah!) and click on history.min.js and then on the Raw button and do a SaveAs in your browser. So you'll be using that JavaScript library which effectively creates popstate events (and other events) for browsers that don't raise them.

Now, in the code above delete the window.onpopstate = function(e){} but save its code block and insert it at the end of the jQuery(function($), right after $('#pagination').pagination('drawPage', hashPageNum);, as follows:

  $(window).on('popstate', function(e) {
  var pagenum = getPageNum();
   $("#content .page").hide().slice(pagenum-1, pagenum).show();
   $('#pagination').pagination('drawPage', pagenum);
  }); 

EDIT I have to add that if you put a link to one of your thus-paginated pages on your site--- e.g., your home page probably has anchors in the menu that go to some of your paginated pages--- then if you put target="_blank" in the link and for the href put www.yourdomain.com/yourpaginatedpage, everything will be fine. It will be fine because you won't be trying to use the back arrow on your browser to get back to your home page as the paginated page will be opening as a new tab or new window.

But... if you leave off the target="_blank" and so open the paginated page in the same window you will find that the back button doesn't work. The history is there to see when you press on the back arrow (actually it's wrong since there are two listings of yourpaginatedpage) but no amount of clicking on the arrow will cause it to work.

The cure is simply to put www.yourdomain.com/yourpaginatedpage#page-1 in as your href... with the #page-1. Then the back arrow will work.

Answer 3

Following code work for me :

function paginationTable() {

    var items = $("table tbody tr");
    var tablaeBody = $("table tbody");
        var numItems = items.length;
        var perPage = 20;

        // Only show the first 20 (or first `per_page`) items initially.
        tablaeBody.html(items.slice(0,20));
        // Now setup the pagination using the `.pagination-page` div.
        $(".pagination-page").pagination({
            items: numItems,
            itemsOnPage: perPage,
            cssStyle: "light-theme",

            // This is the actual page changing functionality.
            onPageClick: function(pageNumber) {
                // We need to show and hide `tr`s appropriately.
                var showFrom = perPage * (pageNumber - 1);
                var showTo = showFrom + perPage;

                tablaeBody.html(items.slice(showFrom,showTo));

            }
        });
}

call this function after prepare your HTML table.

Answer 4

I have tested the Bilal Akil's jQuery(function($)) and I found one mistake that I would like to correct - And thanks Bilal for your involvement on this topic.

As I cannot post a comment or suggest an edit of his post, I will post my answer directly here. For further information look at the Bilal Akil's post.

The selector for pagination was wrong (not the same in fact) in the code as I tried it on a website so I decided to edit your post and by the way I added 2 variables to ensure flexibility for future changes or own customization.

// mind the slight change below, personal idea of best practices
jQuery(function($) {
    // consider adding an id to your table,
    // just incase a second table ever enters the picture..?
    var items = $("table tbody tr");

    var numItems = items.length;
    var perPage = 2;

    var pagination_placeholder_selector = ".pagination-page"; // put in a variable to ensure proper changes in the future
    var myPageName = "#page-"; // a number will follow for each page

    // only show the first 2 (or "first per_page") items initially
    items.slice(perPage).hide();

    // now setup your pagination
    // you need that .pagination-page div before/after your table
    $(pagination_placeholder_selector).pagination({
        items: numItems,
        itemsOnPage: perPage,
        cssStyle: "light-theme",
        hrefTextPrefix: myPageName,
        onPageClick: function(pageNumber) { // this is where the magic happens
            // someone changed page, lets hide/show trs appropriately
            var showFrom = perPage * (pageNumber - 1);
            var showTo = showFrom + perPage;

            items.hide() // first hide everything, then show for the new page
                 .slice(showFrom, showTo).show();
        }
    });



    // EDIT: extra stuff to cover url fragments (i.e. #page-3)
    // https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment
    // is more thoroughly commented (to explain the regular expression)

    // we'll create a function to check the url fragment and change page
    // we're storing this function in a variable so we can reuse it
    var checkFragment = function() {
        // if there's no hash, make sure we go to page 1
        var hash = window.location.hash || (myPageName+"1");

        // we'll use regex to check the hash string
        var re = new RegExp("^"+myPageName+"(\\d+)$");
        hash = hash.match(re);

        if(hash)
            // the selectPage function is described in the documentation
            // we've captured the page number in a regex group: (\d+)
            $(pagination_placeholder_selector).pagination("selectPage", parseInt(hash[1]));
    };

    // we'll call this function whenever the back/forward is pressed
    $(window).bind("popstate", checkFragment);

    // and we'll also call it to check right now!
    checkFragment();



});

Answer 5

I have converted Bilal Akil's work into a function and called it into ajax as I am loading data by ajax call. It works awesome. Thanks to all participants.

function paginate() {
// consider adding an id to your table,
// just incase a second table ever enters the picture..?
var items = jQuery("#searched_prfiles .row .col-md-4");

var numItems = items.length;
var perPage = 2;

var pagination_placeholder_selector = "#pagination_links"; // put in a variable to ensure proper changes in the future
var myPageName = "#page-"; // a number will follow for each page

// only show the first 2 (or "first per_page") items initially
items.slice(perPage).hide();

// now setup your pagination
// you need that .pagination-page div before/after your table
jQuery(pagination_placeholder_selector).pagination({
    items: numItems,
    itemsOnPage: perPage,
    cssStyle: "light-theme",
    hrefTextPrefix: myPageName,
    onPageClick: function(pageNumber) { // this is where the magic happens
        // someone changed page, lets hide/show trs appropriately
        var showFrom = perPage * (pageNumber - 1);
        var showTo = showFrom + perPage;

        items.hide() // first hide everything, then show for the new page
             .slice(showFrom, showTo).show();
    }
});



// EDIT: extra stuff to cover url fragments (i.e. #page-3)
// https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment
// is more thoroughly commented (to explain the regular expression)

// we'll create a function to check the url fragment and change page
// we're storing this function in a variable so we can reuse it
var checkFragment = function() {
    // if there's no hash, make sure we go to page 1
    var hash = window.location.hash || (myPageName+"1");

    // we'll use regex to check the hash string
    var re = new RegExp("^"+myPageName+"(\\d+)$");
    hash = hash.match(re);

    if(hash)
        // the selectPage function is described in the documentation
        // we've captured the page number in a regex group: (\d+)
        jQuery(pagination_placeholder_selector).pagination("selectPage", parseInt(hash[1]));
};

// we'll call this function whenever the back/forward is pressed
jQuery(window).bind("popstate", checkFragment);

// and we'll also call it to check right now!
checkFragment();

}

Answer 6

First add:

<script type="text/javascript" src="mio_path_js/jquery.js"></script>
<script type="text/javascript" src="mio_path_js/jquery.simplePagination.js"></script>

<link type="text/css" rel="stylesheet" href="mio_path_css/simplePagination.css"/>

And after,for 10 elements call Ajax function as:

$(function() {
  $(#id_paginator").pagination({
    items: 100,
    itemsOnPage: 10,
    cssStyle: 'light-theme'
  });
});

Or if you want to load all element:

$.ajax({ ...... ...... success: function (response, status, xhr) { jQuery(function($) { var pageParts = $(".paginate"); var numPages = countSelect; var perPage = 10; pageParts.slice(perPage).hide();

        $("#page-nav").pagination({
        items: numPages,
        itemsOnPage: perPage,
        cssStyle: "light-theme",
        currentPage: numeroSelezionato,
            onPageClick: function(pageNum) {
                $("#myModalWaiting").show();
                var start = perPage * (pageNum - 1);
                var end = start + perPage;
                cambiaPagina(start,end,pageNum);
                numeroSelezionato = pageNum;
            }
        });
    });
}

)};

The Html code is:

<table>
    <tr>
        <th>
            <td>
                ............
                ...............
                .................
            </td>
        </th>
     </tr></table>
<div id="id_paginator"></div>

For other Jquery simplePagination example see here.

Or for more element to load: https://lentux-informatica.com/paginazione-liste-con-jquery-parte-2-2-simplepagination-js/