Pagination Code - Jquery
How to do pagination effect using jquery?
Snippet Code
Rate this page :
|
[ 0 votes]
|
This jquery code can be used to do pagination effect. Here, for example tables of multiple data are paginated.
<script type='text/javascript'>
$(document).ready(function(){
$('#tabledata').after('<div id="change" align="center"></div>');
var display = 2;
var totalrows = $('#tabledata tbody tr').length;
var numPages = totalrows/display;
for(i = 0;i < numPages;i++) {
var pagenum = i+1;
$('#change').append('<a href="#" rel="'+i+'">'+pagenum+'</a> ');
}
$('#tabledata tbody tr').hide();
$('#tabledata tbody tr').slice(0, display).fadeIn();
$('#change a:first').addClass('show');
$('#change a').bind('click', function(){
$('#change a').removeClass('show');
$(this).addClass('show');
var currPage = $(this).attr('rel');
var startItem = currPage * display;
var endItem = startItem + display;
$('#tabledata tbody tr').css('opacity','0').hide().slice(startItem, endItem).
css('display','table-row').animate({opacity:1}, 300);
});
});
</script>
<style>
th{background:grey;}
.show {background:green;}
</style>
<table id="tabledata" align='center' border=1>
<thead><tr><th>Id</th><th>Name</th><th>Department</th></tr></thead>
<tbody>
<tr><td>1</td><td>Amal</td><td>CSE</td></tr>
<tr><td>2</td><td>Arun</td><td>CSE</td></tr>
<tr><td>3</td><td>Anitha</td><td>IT</td></tr>
<tr><td>4</td><td>Aravindh </td><td>IT</td></tr>
<tr><td>5</td><td>Aswathy</td><td>ECE</td></tr>
<tr><td>6</td><td>Banu</td><td>EEE</td></tr>
</tbody>
</table>
