jqueryデータテーブルを使用できます。ajax ロード用のページネーション機能を備えています。次のページをクリックすると、データベースから次のレコードがロードされます。このためには、、、、、のような Jquery ライブラリを追加する必要
があり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 コード
<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 ]
}]
});