强力推荐Java架构师学习网址:https://qiuyadongsite.github.io/
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 = ' + orderId
+ ')" class="btn btn-primary">选用';
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 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
jsonResponse.addProperty("recordsFiltered",((Page
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" ]]} );