I have the following code where I am trying to pagenext and previous for table rows
$( "a.paginate" ).click( function( e ) {
e.preventDefault();
if ( $( this ).attr( "id" ) == "next" ) {
//what to write here?
// firstrecord should be between 0 and max rows
// somehow page size has to be added to the firstrecord
} else {
//what to write here?
// pagesize has to be subtracted, but unable to figure how to
}
paginate( firstRecord, pageSize );
});
Can anybody help me sort how to make the code work
You can use slice
:
Description: Reduce the set of matched elements to a subset specified by a range of indices.
to define the elements to display in the current page.
Code:
var firstRecord = 0;
var pageSize = 4;
var tableRows = $("#movie tbody tr");
$("a.paginate").click(function (e) {
e.preventDefault();
var tmpRec = firstRecord;
if ($(this).attr("id") == "next") {
tmpRec += pageSize;
} else {
tmpRec -= pageSize;
}
if (tmpRec < 0 || tmpRec > tableRows.length) return
firstRecord = tmpRec;
paginate(firstRecord, pageSize);
});
var paginate = function (start, size) {
var end = start + size;
tableRows.hide();
tableRows.slice(start, end).show();
}
paginate(firstRecord, pageSize);
Demo: http://jsfiddle.net/H9JBT/
For hide/show next/prev button you can check if the first/last element in visible using :visible
and is
.
Code:
var paginate = function (start, size) {
var end = start + size;
tableRows.hide();
tableRows.slice(start, end).show();
$(".paginate").show();
if (tableRows.eq(0).is(":visible")) $('#previous').hide();
if (tableRows.eq(tableRows.length-1).is(":visible")) $('#next').hide();
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments