最近项目中用到了BootStrap做后台,在选择表格插件的时候发现了jquery datatables。
功能是很强大,但是网上的例子比较少。在经过一段时间的努力可算是搞出来了。
官网地址:
官网上的例子比较简单,基础的介绍还是要看看的。
效果图
引入相应css 和js
页面HTML
User Name: This is inline help Division:全部BSearchUser ID User Ename AD Account User Email Division Entity IsValid Operation我这里用到的是 服务器端处理。(很少有人把数据全部取出来,让js 处理的吧。。。)
JS 代码 初始化
var oTable = null;
var initUserList = function () {
var table = $('#UserList');
if (oTable == null) { //仅第一次检索时初始化Datatable
oTable = table.dataTable({
"bLengthChange": false, //改变每页显示数据数量
"bFilter": false, //过滤功能
"bProcessing": true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候,开启此功能比较好
"bServerSide": true, //开启服务器模式,使用服务器端处理配置datatable。注意:sAjaxSource参数也必须被给予为了给datatable源代码来获取所需的数据对于每个画。 这个翻译有点别扭。
"iDisplayLength": 10,"sAjaxSource": "/Home/Home/GetUserList","fnServerData": retrieveData,//执行方法
//默认排序
"order": [
[0, 'asc']//第一列正序
],
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 10,
//向服务器传额外的参数
"fnServerParams": function (aoData) {
aoData.push(
{ "name": "UserName", "value": $('#txt_UserName').val() },//员工名字
{ "name": "Division", "value": $('#Sel_Division').val() })//所处Division
},
//配置列要显示的数据
"columns": [
{ "data": "User_ID" },
{ "data": "User_Ename" },
{ "data": "AD_Account" },
{ "data": "User_Email" },
{ "data": "Division" },
{ "data": "Entity" },
{ "data": "IsValid" },
{ "data": "" }//操作按钮列
],
//按钮列
"columnDefs": [
{
"targets": -1,//删除
"data": null,
"defaultContent": "<button type='button'><i></i></button><button type='button'><i></i></button>"
}
] ,
//语言配置--页面显示的文字
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty": "No entries found",
"infoFiltered": "(filtered1 from _MAX_ total entries)",
"lengthMenu": "Show _MENU_ entries",
"search": "Search:",
"zeroRecords": "No matching records found"
}
});
}
//刷新Datatable,会自动激发retrieveData
oTable.fnDraw();
// tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
}
function retrieveData(sSource, aoData, fnCallback) {
$.ajax({
"type": "get",
"contentType": "application/json",
"url": sSource,
"dataType": "json",
"data": aoData,
"success": function (resp) {
fnCallback(resp); //服务器端返回的对象的returnObject部分是要求的格式
}
});
/* Post 方法调用
$.ajax({
"type": "post",
"url": sSource,
"dataType": "json",
"data": aoData,
"success": function (resp) {
fnCallback(resp); //服务器端返回的对象的returnObject部分是要求的格式
}
});*/
}
后台代码
开启后台处理之后,每次翻页、排序都会调用代码中配置的地址:/Home/Home/GetUserList
回传很多参数,我们这里只用到这几个:
页面大小:iDisplayLength
开始数:iDisplayStart(是开始数不是当前页数...)
要排序的列序号:iSortCol_0(从零开始)
正序还是倒序:sSortDir_0(desc or asc)
获取第一列列明:mDataProp_0(从零开始)
好了上代码