参考 DataTable官网
基本使用格式
曾用过的案例
//直接function的目的是进来即执行
$(function() {
oTable = $('#tabOrganization').DataTableInit({
"bPaginate": false, //开关,是否显示分页器
"ordering": false, // 禁止排序
"bAutoWidth" : true,//宽度自适应
"sAjaxSource" : "请求路径",
"language" : {//表格信息显示,注意服务端需要result.put("iTotalDisplayRecords", list.size());
"processing": '<div class="panel-overlay-content unselectable"><span class="panel-overlay-icon text-dark"><i class="fa fa-spinner fa-2x fa-spin"></i></span><h4 class="panel-overlay-title">数据加载中...</h4></div>',
"lengthMenu": "显示 _MENU_ 项结果",
"zeroRecords": "没有匹配结果",
"info": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"infoEmpty": "显示第 0 至 0 项结果,共 0 项",
"infoFiltered": "(由 _MAX_ 项结果过滤)",
"infoPostFix": "",
"search": "搜索:",
"searchPlaceholder": "搜索...",
"url": "",
"emptyTable": "暂无数据",
"loadingRecords": "载入中...",
"infoThousands": ",",
"paginate": {
"first": "首页",
"previous": "上页",
"next": "下页",
"last": "末页"
},
"aoColumnDefs" : [ {
"aTargets" : [ 0 ],
"sClass" : "center",
}, {
"aTargets" : [ 1 ],
"sClass" : "center"
}, {
"aTargets" : [ 2 ],
"sClass" : "center"
}, {
"aTargets" : [ 3 ],
"sClass" : "center"
}, {
"aTargets" : [ 4 ],
"sClass" : "center"
}, {
"aTargets" : [ 5 ],
}],
//这里data不太好理解,我是这么想的:
"fnServerData" : function(url, data, callback) {
data = _setSortInfo4Ajax(data, 2, "desc");//暂时不太清楚该设置,初步理解为默认排序
data.push({
"name" : "organizationId",
"value" : ${organizationId}
});
$.ajax({
"type" : "POST",
"contentType" : "application/json",
"url" : url,
"dataType" : "json",
"data" : JSON.stringify(data),
"success" : function(response) {
callback(response);
}
});
}
});
}
//自定义事件
function search() {
oTable.draw();//自主调用渲染
}
从服务器端取数据
要指定几个参数:
sAjaxSource:获取数据的url
这样,在DataTables需要数据时会调用jquery的getJSON获取数据,其中url就是sAjaxSource,
同时传递一堆自定义的参数,包括需要显示的起始记录数,需要显示的记录数,列数,排序
列等等,具体可以参看这里http://www.datatables.net/usage/server-side。其中一个比较
特殊的是sEcho,这个参数需要以后原封不动地返回给页面。
DataTables通过fnServerData提供了这样一个接口,fnServerData是与服务器端交换数据时被
调用的函数,默认实现是如上所说的通过getJSON发送请求,然后接收特定格式的json数据(这
个在服务器端处理部分再说)。fnServerData会接到3个参数:
sSource: 接收数据的url,就是sAjaxSource中指定的地址
aoData(名称无所谓,只要参数位置对应就好,如上部分代码用data):DataTables定义的参数,是一个数组,其中每个元素是一个name-value对,(注意DataTables的一系列参数将由它自动生成并加入)如果有额外数据我需要通过
data.push({
"name" : "organizationId",
"value" : $("#organizationId").val()
});
把参数加进去
fnCallback:服务器返回数据后的处理函数,我需要按DataTables期望的格式传入返回数据
分页
1.使用datatable前台分页,需要后台返回全部数据,返回lisit
2.如果是后台分页 则后台需要获取分页参数,页面中要加
"searchable":true, "bServerSide": true
这两个属性,不需要 dataSrc : "" 这个属性
返回DataTablePageDto 分页对象,查询的list结果set到分页对象中