dataTables分頁展示資料注意事項(案例)(一)
dataTables可以高效的提供大量資料的表格展示:
程式碼如:
前臺:
table = $('#example').DataTable(
{"ajax" : "/c",
"ordering" : false,
"processing" : true,
"serverSide" : true,
"bDestroy" : true,//不加這個在第二次展示此表格時報錯
"bLengthChange": false, //改變每頁顯示資料數量
"columns" : [ {
"data" : "id"
}, {
"data" : "name"
}, {
"data" : null
} ],
"columnDefs" : [
{
"targets" : 2,
"data" : null,
"render" : function(data, type, row) {
var html = '<a onclick="use(' + row.id + ','
+ orderId
+ ')" class="btn btn-primary">選用</a>';
return html;
}
} ],
"language" : {
"sProcessing" : "處理中...",
"sLengthMenu" : "顯示 _MENU_ 項結果",
"sZeroRecords" : "沒有匹配結果",
"sInfo" : "顯示第 _START_ 至 _END_ 項結果,共 _TOTAL_ 項",
"sInfoEmpty" : "顯示第 0 至 0 項結果,共 0 項",
"sInfoFiltered" : "(由 _MAX_ 項結果過濾)",
"sInfoPostFix" : "",
"sSearch" : "搜尋:",
"sUrl" : "",
"sEmptyTable" : "表中資料為空",
"sLoadingRecords" : "載入中...",
"sInfoThousands" : ",",
"oPaginate" : {
"sFirst" : "首頁",
"sPrevious" : "上頁",
"sNext" : "下頁",
"sLast" : "末頁"
},
"oAria" : {
"sSortAscending" : ": 以升序排列此列",
"sSortDescending" : ": 以降序排列此列"
}
}
});
後臺control:
int draw = Integer.valueOf(request.getParameter("draw"));
int start = Integer.valueOf(request.getParameter("start"));
int length = 5;固定前臺展示的每頁記錄數,否則用length值
PageHelper.startPage(start / length + 1, length);
JsonObject jsonResponse = new JsonObject();
List<Template> list=null;
String searchValue = request.getParameter("search[value]");//實現搜尋功能
if("".equals(searchValue)){
list = tem.findAllList();
}else{
list = tem.searchListByName("%" + searchValue + "%");
}
jsonResponse.addProperty("draw", draw);
jsonResponse.addProperty("recordsTotal", ((Page<Tem>) list).getTotal());
jsonResponse.addProperty("recordsFiltered",((Page<Tem>) list).getTotal());
Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm")
.create();
jsonResponse.add("data", gson.toJsonTree(list));
return jsonResponse.toString();
上述是的例子,需要注意事項:
重新載入:table.ajax.reload();
要想更新dataTables時,在新方法中新增:$('#demo').dataTable().fnDestroy();
資料排序:$('#example').dataTable( {"aaSorting": [[ 4, "desc" ]]} );