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