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.