以前也使用过DataTables,前一阵在用的时候发现参数都变了,才有了这个教程
- DataTables简介
- 基本配置
- 工具类
1、DataTables简介
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
- 分页,即时搜索和排序
- 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理
- 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
- 各式各样的扩展: Editor, TableTools, FixedColumns ……
- 丰富多样的option和强大的API
- 支持国际化
- 超过2900+个单元测试
- 免费开源 ( MIT license )! 商业支持
- 更多特性请到官网查看
DataTables中文网网址:http://datatables.club/
2、基本配置
(1)js
var datatable = $("datatableName").DataTable({
"pagingType" : "full_numbers",//页码显示方式
"lengthChange" : false,//是否允许在网页上切换每页记录数
"ordering" : true,//是否开启排序
"searching" : false,//是否允许网页上搜索
"displayStart" : 0,//初始化开始序号,从0开始
"pageLength" : 3,//每页记录数
"processing" : true,//是否显示加载中的信息
"serverSide" : true,//是否服务器端处理
"language" : {//界面汉化
"emptyTable" : "没有相关数据",
"infoEmpty" : "0 / 0",
"thousands" : ",",
"zeroRecords" : "没有相关数据",
"info" : "第 _PAGE_ 页 / 共 _PAGES_ 页",
"infoEmpty" : "没有相关数据",
"processing" : "正在处理...",
"loadingRecords" : "请等待,数据正在加载中......",
"paginate" : {
"first" : "首页",
"previous" : "上一页",
"next" : "下一页",
"last" : "尾页"
},
"aria" : {
"sortAscending" : "升序",
"sortDescending" : "降序"
}
},
"ajax" : {
"url" : "urlAction/url.do",//访问地址
"data" : function(data) {//向服务器发送的其他信息
return $.extend({}, data, {
"paramName":"paramVal",//键值对形式
...
});
}
},
"columns" : [//每列的参数
{
"name" : name,
"data" : name,
"visible" : visible,//是否可见
"defaultContent" : "",//默认内容
"orderable" : orderable,//是否可排序
"orderSequence" : orderSequence//排序规则["asc","desc"],先升序后降序,循环
},...
],
"createdRow" : function(row, data, dataIndex){//加载没行时的处理方法
...
}
});
pageType类型
- numbers 只显示数字 (1.10.8版本)
- simple 只有上一页和下一页两个按钮
- simple_numbers 上一页和下一页两个按钮,加上页数按钮
- full 首页,尾页,上一页和下一页四个按钮
- full_numbers 首页,尾页,上一页和下一页四个按钮,加上数字按钮
- first_last_numbers 首页,尾页两个按钮,加上数字按钮
更多详细配置请参看这里:http://datatables.club/reference/option/
(2)服务器端处理
参数在这里 : http://datatables.club/manual/server-side.html
3、工具类
//js包
<script
src="${basePath }/adminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script
src="${basePath }/adminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
//工具方法
//创建Column参数
function buildColumn(name, visible, orderable, orderSequence) {
if (visible == null || typeof (visible) == "undefined") {
visible = true;
}
if (orderable == null || typeof (orderable) == "undefined") {
orderable = true;
}
if (orderSequence == null || typeof (orderSequence) == "undefined") {
orderSequence = [ "asc", "desc" ];
}
return {
"name" : name,
"data" : name,
"visible" : visible,
"defaultContent" : "",
"orderable" : orderable,
"orderSequence" : orderSequence
};
}
//构建datatable
function datatables(tableId, url, columns, rowInit) {
var datatable = $("#" + tableId).DataTable({
"pagingType" : "full_numbers",
"lengthChange" : false,
"ordering" : true,
"searching" : false,
"displayStart" : 0,
"pageLength" : 3,
"processing" : true,
"serverSide" : true,
"language" : {
"emptyTable" : "没有相关数据",
"infoEmpty" : "0 / 0",
"thousands" : ",",
"zeroRecords" : "没有相关数据",
"info" : "第 _PAGE_ 页 / 共 _PAGES_ 页",
"infoEmpty" : "没有相关数据",
"processing" : "正在处理...",
"loadingRecords" : "请等待,数据正在加载中......",
"paginate" : {
"first" : "首页",
"previous" : "上一页",
"next" : "下一页",
"last" : "尾页"
},
"aria" : {
"sortAscending" : "升序",
"sortDescending" : "降序"
}
},
"ajax" : {
"url" : url,
"data" : function(data) {
var map = {};
var param = $("#searchForm").serialize();
var params = param.split("&");
for (var i = 0; i < params.length; i++) {
var p = params[i];
var nv = p.split("=");
map[nv[0]] = nv[1];
}
return $.extend({}, data, map);
}
},
"columns" : columns,
"createdRow" : rowInit
// function(row, data, dataIndex) {}
});
return datatable;
}
//**************************************
//调用
var columns = [ buildColumn("id", false, false),
buildColumn("name", true, false),
buildColumn("url", true, false),
buildColumn("parentId", true, false),
buildColumn("menuLevel", true, false),
buildColumn("orderNum", true, false),
buildColumn("icon", true, false) ];
var datatable = datatables("menuList", "${basePath}/admin0302",
columns, function(row, data, dataIndex) {
alert(data);
});
4、引用
(1)mickey_miki
dataTables-使用详细说明整理
(2)丶拾慌
datatables参数配置详解