You can use jquery datatable. which has pagination functionality for ajax load. so when you click on next page it loads next records from database. For this you need to add Jquery library like jquery.dataTables.min.js
,jquery-ui-1.8.10.custom.min.js
, jquery-1.4.4.min.js
, jquery-1.4.2.min.js
, jquery-ui-1.8.10.custom.css
JSP code
<table id="reqAllQueriesTable" cellpadding="0" cellspacing="0" border="0" class="display" style="width: 100%;">
<thead>
<tr>
<th style="display: none"></th>
<th> </th>
<th><spring:message code='Name'/></th>
<th><spring:message code='runDate'/></th>
th><spring:message code='noOfRec'/></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JavaScript
var oTable = $('#reqAllQueriesTable')
.dataTable(
{
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "query/getQuery",
"bPaginate" : true,
"bScrollCollapse" : true,
"iDisplayLength" : 10,
"bFilter" : true,
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"oLanguage" : {
"sLengthMenu" : "Display _MENU_ records per page",
"sZeroRecords" : "No Queries found",
"sInfo" : "Showing _START_ to _END_ of _TOTAL_ records",
"sInfoEmpty" : "Showing 0 to 0 of 0 records",
"sInfoFiltered" : "(filtered from _MAX_ total records)"
},
"aaSorting" : [ [ 3, "desc" ] ],
"aoColumns" : [/*Id*/{
"bSearchable" : false,
"bVisible" : false
},
/*Id RadioButton*/{
"bSearchable" : false,
"bSortable" : false
},
/*Name*/null,
/*Run Date*/{
"sType" : "date"
},
{
"fnRender" : function(oObj) {
return '<input type="radio" name="Id" value= "' + oObj.aData[0] + " "/>';
},
"aTargets" : [ 1 ]
}]
});