| S.No | Category | Product | Price | Status |
| 1 | Clothing | North Jacket | $189.99 | In-stock |
| 2 | Shoes | Nike | $59.99 | In-stock |
| 3 | Electronics | LED TV | $589.99 | Out of stock |
| 4 | Sporting | Ping Golf | $159.99 | In-stock |
| 5 | Clothing | Sweater | $19.99 | In-stock |
| 6 | Clothing | North Jacket | $189.99 | In-stock |
| 7 | Shoes | Nike | $59.99 | In-stock |
| 8 | Electronics | LED TV | $589.99 | Out of stock |
| 9 | Sporting | Ping Golf | $159.99 | In-stock |
| 10 | Shoes | Nike | $59.99 | In-stock |
| 11 | Electronics | LED TV | $589.99 | Out of stock |
| 12 | Sporting | North Jacket | $159.99 | In-stock |
// css
table, th, td {
cellpadding:1px;
cellspacing:1px;
}
th{
background:#B4F114;
}
.active {
background:red;
}
// jquery
$(document).ready(function(){
$('#data').after('<div id="nav"></div>');
var rowsShown = 4;
var rowsTotal = $('#data tbody tr').length;
var numPages = rowsTotal/rowsShown;
for(i = 0;i < numPages;i++) {
var pageNum = i + 1;
$('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
}
$('#data tbody tr').hide();
$('#data tbody tr').slice(0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function(){
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#data tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
css('display','table-row').animate({opacity:1}, 300);
});
});
http://jqueryasp.net/table-pagination-using-jquery-example/[
^]
Submit an article or tip