最近项目中有使用到bootstrap框架,为了风格统一,于是后台表格分页显示插件选用了DataTable。DataTable是一款基于jquery开发的table控件,且风格统一于bootstrap,所以感觉选择这个控件是不错的选择。
国内介绍 DataTable 插件的文档还是不多,且很多都是基于version 1.9之前的老版本使用。我选择的是最新的1.10版,和之前的历史版本有较大区别,这里也是我项目中使用遇到的比较麻烦的问题,耗时1天半才搞定,所以在此撰写此文,希望有童谣问题的童鞋能有所收获。
问题描述:
DataTable常用参数配置:
table = $('#dataTables-news').dataTable( {
lengthMenu : [10, 25, 50],
processing: true,
serverSide: true,
ajax: {
url: "./news/queryPageNews.htm",
data : function(data) {
for (var i = 0; i < data.columns.length; i++) {
column = data.columns[i];
column.searchRegex = column.search.regex;
column.searchValue = column.search.value;
delete(column.search);
}
}
},
columnDefs: [
{
"targets": [ 0 ],
"visible": false
}
],
columns: [
{ "data": "newsId","name":"news_id","searchable" : false},
{ "data": "newsTitle" ,"name":"news_title"},
{ "data": "newsType.newsTypeName" ,"name":"news_type" },
{ "data": "newsAuthor" ,"name":"news_author","orderable" : false},
{ "data": "newsReleaseTime" ,"name":"news_release_time","searchable" : false,"orderable" : false},
{ "data": "newsKeywords" ,"name":"news_keywords","searchable" : false,"orderable" : false},
{
"data": null,
"orderable" : false,
"className": "center",
}
]
} );
columns:是用来定义表格列相关详细配置,关系数据回调后的解析、是否可查询、查询时字段名称等问题,是一般开发者最为关注的配置项之一。
DataTable支持浏览器端和服务器端的分页。客户端分页较为简单,当使用服务器端分页时,问题就复杂了点,要设计字段排序。插件通过Ajax发送一个请求给服务器端,传递相关参数,具体如下:
draw(integer):Draw counter。用来保证从服务器端异步返回的结果按照序列绘制,可以有效防止跨域攻击。
start(integer):开始页码
length(integer):单页显示数量
search.value(string): Global search value
search.regex(boolean): 全局过滤器(不怎么在服务器端分页使用)
order[i].column(integer):需要排序的列号,从0开始计数