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'
});
});
*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.
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.