jquery datatable[表格处理]
最近在公司实习发现一个额功能强大的表格解决方案，了解了一下，先总结如下：
1.官网：http://www.datatables.net/
2.需要特别注意:被dataTable处理的table对象，必须有thead与tbody，而且，结构要规整（数据不一定要完整），这样才能正确处理。
3.一些基本属性：
"bPaginate": true, //翻页功能
"bLengthChange": true, //改变每页显示数据数量
"bFilter": true, //过滤功能
"bSort": false, //排序功能
"bInfo": true,//页脚信息
"bAutoWidth": true//自动宽度
4.可设置属性
|
属性名称 |
取值范围 |
解释 |
|
bAutoWidth |
true or false, default true |
是否自动计算表格各列宽度 |
|
bDeferRender |
true or false, default false |
用于用于衬着的一个参数 |
|
bFilter |
true or false, default true |
开关，是否启用客户端过滤功能 |
|
bInfo |
true or false, default true |
开关，是否显示表格的一些信息 |
|
bJQueryUI |
true or false, default false |
是否使用jquery ui themeroller的风格（不是很懂） |
|
bLengthChange |
true or false, default true |
开关，是否显示一个每页长度的选择条（需要分页器支持） |
|
bPaginate |
true or false, default true |
开关，是否显示（使用）分页器 |
|
bProcessing |
true or false, defualt false |
开关，以指定当正在处理数据的时候，是否显示“正在处理”这个提示信息 |
|
bScrollInfinite |
true or false, default false |
开关，以指定是否无限滚动（与sScrollY配合使用），在大数据量的时候很有用。当这个标志为true的时候，分页器就默认关闭 |
|
bSort |
true or false, default true |
开关，是否让各列具有按列排序功能 |
|
bSortClasses |
true or false, default true |
开关，指定当当前列在排序时，是否增加classes 'sorting_1', 'sorting_2' and 'sorting_3'，打开后，在处理大数据时，性能有所损失 |
|
bStateSave |
true or false, default false |
开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的，打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的 |
|
sScrollX |
'disabled' or '100%' 类似的字符串 |
是否开启水平滚动，以及指定滚动区域大小 |
|
sScrollY |
'disabled' or '200px' 类似的字符串 |
是否开启垂直滚动，以及指定滚动区域大小 |
|
aaSorting |
array array[int,string], 如[], [[0,'asc'], [0,'desc']] |
指定按多列数据排序的依据 |
|
aaSortingFixed |
同上 |
同上。唯一不同点是不能被用户的自定义配置冲突 |
|
aLengthMenu |
default [10, 25, 50, 100]，可以为一维数组，也可为二维数组，比如：[[10, 25, 50, -1], [10, 25, 50, "All"]] |
这个为选择每页的条目数，当使用一个二维数组时，二维层面只能有两个元素，第一个为显示每页条目数的选项，第二个是关于这些选项的解释 |
|
aoSearchCols |
default null, 类似：[null, {"sSearch": "My filter"}, null,{"sSearch": "^[0-9]", "bEscapeRegex": false}] |
给每个列单独定义其初始化搜索列表特性（这一块还没搞懂） |
|
asStripClasses |
default ['odd', 'even'], 比如['strip1', 'strip2', 'strip3'] |
指定要被应用到各行的class风格，会自动循环 |
|
bDestroy |
true or false, default false |
用于当要在同一个元素上执行新的dataTable绑定时，将之前的那个数据对象清除掉，换以新的对象设置 |
|
bRetrieve |
true or false, default false |
用于指明当执行dataTable绑定时，是否返回DataTable对象 |
|
bScrollCollapse |
true or false, default false |
指定适当的时候缩起滚动视图 |
|
iCookieDuration |
整数，默认7200，单位为秒 |
指定用于存储客户端信息到cookie中的时间长度，超过这个时间后，自动过期 |
|
iDeferLoading |
整数，默认为null |
延迟加载，它的参数为要加载条目的数目，通常与bServerSide，sAjaxSource等配合使用 |
|
iDisplayLength |
整数，默认为10 |
用于指定一屏显示的条数，需开启分页器 |
|
iDisplayStart |
整数，默认为0 |
用于指定从哪一条数据开始显示到表格中去 |
|
iScrollLoadGap |
整数，默认为100 |
用于指定当DataTable设置为滚动时，最多可以一屏显示多少条数据 |
|
oSearch |
默认{ "sSearch": "", "bRegex": false, "bSmart": true } |
又是初始时指定搜索参数相关的，有点复杂，没搞懂目前 |
|
sAjaxDataProp |
字符串，default 'aaData' |
指定当从服务端获取表格数据时，数据项使用的名字 |
|
sAjaxSource |
URL字符串，default null |
指定要从哪个URL获取数据（一般跳入一个controller返回数据） |
|
sCookiePrefix |
字符串，default 'SpryMedia_DataTables_' |
当打开状态存储特性后，用于指定存储在cookies中的字符串的前缀名字 |
|
sDom |
default lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true) |
这是用于定义DataTable布局的一个强大的属性，另开专门文档来补充说明吧 |
|
sPaginationType |
'full_numbers' or 'two_button', default 'two_button' |
用于指定分页器风格 |
5.常用方法
a)数据排序
$(document).ready(function() {
$('#example').dataTable( {
"aaSorting": [
[ 4, “desc” ]
]
} );
} );从第0列开始，以第4列倒序排列
b）隐藏某些列
$(document).ready(function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ "bVisible": false, "aTargets": [ 3 ] }
] } );
} );
c)状态保存，使用了翻页或者改变了每页显示数据数量，会保存在cookie中，下回访问时会显示上一次关闭页面时的内容。
$(document).ready(function() {
$('#example').dataTable( {
"bStateSave": true
} );
} );
d)显示数字的翻页样式
$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "full_numbers"
} );
} );
e)水平限制宽度
$(document).ready(function() {
$('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
} );
} );
f)改变语言
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉， 没有找到",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
},
"sZeroRecords": "没有检索到数据",
"sProcessing": "<img src='./loading.gif' />"
}
} );
g)排序控制
$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
{ "asSorting": [ “asc” ] },
{ "asSorting": [ “desc”, “asc”, “asc” ] },
{ "asSorting": [ ] },
{ "asSorting": [ ] }
]
} );
} );
h)使用ajax源
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": './arrays.txt'
} );
} );
j)使用ajax，在服务器端整理数据
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers","sAjaxSource": "./server_processing.php",
/*如果加上下面这段内容，则使用post方式传递数据
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}*/
"oLanguage": {
"sUrl": "cn.txt"
},
"aoColumns": [
{ "sName": "platform" },
{ "sName": "version" },
{ "sName": "engine" },
{ "sName": "browser" },
{ "sName": "grade" }
]//$_GET[‘sColumns’]将接收到aoColumns传递数据
} );
} );
k)为每行加载id和class
服务器端返回数据的格式：
{
"DT_RowId": "row_8",
"DT_RowClass": "gradeA",
"0": "Gecko",
"1": "Firefox 1.5",
"2": "Win 98+ / OSX.2+",
"3": "1.8",
"4": "A"
},
6.实例
html页面：
1 <div class="portlet-body"> 2 <table id="userDataTable" class="table table-hover table-bordered table-striped dt-responsive" width="100%"> 3 <thead> 4 <tr> 5 <th style="text-align: center;font-size: 14px;">账号</th> 6 <th style="text-align: center;font-size: 14px;">姓名</th> 7 <th style="text-align: center;font-size: 14px;">角色</th> 8 <th style="text-align: center;font-size: 14px;">更新时间</th> 9 <th style="text-align: center;font-size: 14px;width:15%">操作</th> 10 </tr> 11 </thead> 12 <tbody style="text-align: center;font-size: 15px;"></tbody> 13 </table> 14 </div>
js代码：
1 userDataTable = $('#userDataTable').DataTable({"bLengthChange":false,"bServerSide": true,"bFilter": false,"bProcessing": true,"bSort": true,"sAjaxSource": CONSTANT_PATH+"/user/queryUsers", 2 "fnServerParams" : function(aDataSet) {aDataSet.push({"name" : "userRole","value" : $("#roles").val()},{"name" : "userNo","value":$("#userNo1").val()},{"name" : "userName","value" : $("#userName").val() },{"name" : "createStartDt","value" : $("#createStartDt").val()},{"name" : "createEndDt","value" : $("#createEndDt").val()});}, 3 "fbServerData":function(sSource,aDataSet){$.ajax({"dataType":"json","type":"GET","url":sSource,"data":aDataSet});}, 4 "aoColumns":[{"mDataProp":"userNo"},{"mDataProp":"userName"},{"mDataProp":"ext1"},{"mDataProp":"createDate"},{"mDataProp":"locked"}], 5 "aoColumnDefs": [ 6 {orderable:false,targets:[1,2,3,4]}, 7 {"aTargets":[0],"mRender":function(data,type,full){return (full.locked)?data+" <span class='label label-danger'><i class='icon-lock'></i></span>":data;}}, 8 {"aTargets": [4],"mRender":function (data, type, full) { 9 var lockAction = (data)?"<i class='icon-lock-open'></i> 解封用户":"<i class='icon-lock'></i> 禁封用户"; 10 var operation="<div class='btn-group'><a class='btn btn-default btn-sm' id='query' data-id='"+full.userId +"'data-json='"+JSON.stringify(full)+"'><i class='fa fa-file-text-o'></i> 用户详情</a><a href='#' type='button' class='btn btn-default btn-sm dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'><span class='caret'></span></a><ul class='dropdown-menu'>"; 11 operation+="<li><a id='reset' data-value='"+full.userNo+"' data-id='"+full.userId +"'><i class='icon-puzzle'></i> 重置密码</a></li>"; 12 operation+="<li><a id='alterRole' data-value='"+full.userNo+"' data-id='"+full.userId +"'><i class='icon-users'></i> 变更角色</a></li>"; 13 operation+="<li><a id='lock' data-value='"+data+"' data-type='"+full.userName+"' data-id='"+full.userId +"'>"+lockAction+"</a></li>"; 14 return operation+"<li><a id='dltRole' data-name='"+full.userName+"' data-id='"+full.userId +"'><i class='fa fa-remove'></i> 删除用户</a></li></ul></div>"; 15 } 16 },{"aTargets": [1,2,3],"mRender":function (data, type, full) {if(data!=null&&data!="")return data;else return "<font color='font-red-mint'>尚未设置</font>";}}], 17 "oLanguage":{"sUrl": CONSTANT_PATH+"/resources/assets/plugins/dataTables/txt/page.txt"} 18 });
其中CONSTANT_PATH+"/resources/assets/plugins/dataTables/txt/page.txt页面中：
1 {"sProcessing": "处理中...", 2 "sLengthMenu": "每页显示 _MENU_ 条记录", 3 "sZeroRecords": "没有匹配的记录", 4 "sInfo": "从 _START_ 到 _END_ /共_TOTAL_条数据", 5 "sInfoEmpty": "没有数据", 6 "sInfoFiltered": "", 7 "sZeroRecords": "没有数据", 8 "oPaginate": { 9 "sFirst": "首页", 10 "sPrevious": "上一页", 11 "sNext": "下一页", 12 "sLast": "尾页"} 13 }
最终结果
