JQuery DataTables学习
因为工作原因最近接触到了一个名叫Jquery DataTables的东西,这个东西太神奇了,一个在数据表显示和操作方面无所不能的Jquery插件。在这里来梳理一下,做个小小的
总结,以后用起来也方便很多。
Jquery DataTables下载地址:http://datatables.net/
Jquery DataTables的使用比较简单,只要我们的table标签具有thead和tbody就ok了。然后找到table标签,执行dataTable方法就可以了:$("xxx").dataTable();
bPaginate:是否分页(bool)
bLengthChange:是否显示下拉框来选择每页显示几条数据(bool)
bFilter:是否显示Search框,搜索数据(bool)
bSort:使各行具有排序功能(bool)
bAutoWidth:自动计算表格各列宽度(bool)
aaStorting:对某列进行默认排序
eg1:[[4,"desc"]] 对第4列(从0开始)倒序排列
ge2:[[0,"asc"],[1,"asc"]] 先按第0列升序排列,在前面的基础上对第1列升序排列(想要继续附件排列条件,按住shift,点击排序)
aoColumnDefs: [
{ "bSearchable": false, "bVisible": false, "aTargets": [2] }, 第二列不可见,并且不可以被search框 搜索
{ "bVisible": false, "aTargets": [3] } 第三列不可见
]
bStateSave:保存操作状态,如search框内的内容等
sPaginationType: "full_numbers", //分页风格 two_button 或者full_numbers 分页风格
Scroll:滚动条
X: "sScrollX":"100%", X轴外部宽度110
"sScrollXInner":"110%" X轴内部宽度100
Y: "sScrollY":200 Y轴高度200
“bScrollCollapse”: 当数据不足以达到200时,table的height是变为0(true)还是维持200(false)
“bScrollInfinite”:
"oLanguage":{ 改变提示语言格式
"sLengthMenu":"Display _MENU_ records per page", 每页显示多少条数据
"sZeroRecords":"Nothing found - sorry", 没有数据的时候的提示
"sInfo" :"Showing _START_ to _END_ of _TOTAL_ records", 显示第n到第m条数据
“sInfoEmpty” :"Showing 0 to 0 of o records" 没有数据的时候的提示(第n到第m条数据)
"sInfoFiltered" :"(filtered from _MAX_ total records)" 搜索后的一个提示语
}