Menu
I am trying to create a table such that when there are more than 10 rows I want to create a hyperlink which tells the user to go on the next page. The concept is called pagination, but how can I achieve it with jQuery/ JavaScript?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Table</title>
<style type="text/css">
th {
background-color: #ddd;
}
th td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<th>Heading1</th>
<th>Heading2</th>
<tbody>
<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>
<tr></tr>
</tbody>
</table>
</body>
</html>
574
Alternatively to the plugin, if you want to see simplified code so you can educate yourself as to how pagination works, have a look at this fiddle I knocked up for you.
http://jsfiddle.net/29W9Q/
The code simply binds two buttons, previous and next to change the visibility of the rows of the table that you specified. Each time a button is clicked, the steps are: see if you can move backward or forward, hide the current rows, find the rows that should be visible, 10 up or 10 down, and then make them visible. The rest of the code is to illustrate the example.
The real jQuery work is being done by the less-than and greater-than selectors: :lt() and :gt(), to select the rows for hiding/showing.
var maxRows = 10;
$('.paginated-table').each(function() {
var cTable = $(this);
var cRows = cTable.find('tr:gt(0)');
var cRowCount = cRows.size();
if (cRowCount < maxRows) {
return;
}
/* add numbers to the rows for visuals on the demo */
cRows.each(function(i) {
$(this).find('td:first').text(function(j, val) {
return (i + 1) + " - " + val;
});
});
/* hide all rows above the max initially */
cRows.filter(':gt(' + (maxRows - 1) + ')').hide();
var cPrev = cTable.siblings('.prev');
var cNext = cTable.siblings('.next');
/* start with previous disabled */
cPrev.addClass('disabled');
cPrev.click(function() {
var cFirstVisible = cRows.index(cRows.filter(':visible'));
if (cPrev.hasClass('disabled')) {
return false;
}
cRows.hide();
if (cFirstVisible - maxRows - 1 > 0) {
cRows.filter(':lt(' + cFirstVisible + '):gt(' + (cFirstVisible - maxRows - 1) + ')').show();
} else {
cRows.filter(':lt(' + cFirstVisible + ')').show();
}
if (cFirstVisible - maxRows <= 0) {
cPrev.addClass('disabled');
}
cNext.removeClass('disabled');
return false;
});
cNext.click(function() {
var cFirstVisible = cRows.index(cRows.filter(':visible'));
if (cNext.hasClass('disabled')) {
return false;
}
cRows.hide();
cRows.filter(':lt(' + (cFirstVisible +2 * maxRows) + '):gt(' + (cFirstVisible + maxRows - 1) + ')').show();
if (cFirstVisible + 2 * maxRows >= cRows.size()) {
cNext.addClass('disabled');
}
cPrev.removeClass('disabled');
return false;
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
