I got a no. of pages but I want to restrict it by showing 5 pages on load with next and previous buttons which shows pages number.
My code is:
<script>
$(document).ready(function() {
var totalRows = $('#MyTable').find('tbody tr:has(td)').length;
var recordPerPage = 10;
var totalPages = Math.ceil(totalRows / recordPerPage);
var $pages = $('<div id="pages"></div>');
var $previous = $('<span class="previous"><<</spnan>');
var $next = $('<span class="next">>></spnan>');
for (i = 0; i < totalPages; i++) {
$('<span>' + (i + 1) + '</span>').appendTo($pages);
}
$pages.appendTo('#MyTable');
$('#MyTable').find('tbody tr:has(td)').hide();
var tr = $('#MyTable tbody tr:has(td)');
for (var i = 0; i <= recordPerPage-1; i++) {
$(tr[i]).show();
}
$('span').click(function(event) {
$('#MyTable').find('tbody tr:has(td)').hide();
var nBegin = ($(this).text() - 1) * recordPerPage;
var nEnd = $(this).text() * recordPerPage - 1;
for (var i = nBegin; i <= nEnd; i++)
{
$(tr[i]).show();
}
});
});
</script>
I've made my pagination like: "first previous 1 2 3 4 5 next last"
I hope you guys understand?
Thanks in advance.
Hi, You can create simple pagination using the TWBS pagination JS library. here is a quick example of pagination on codepen it might help you.
example code on codepen