jquery.dataTable.js 使用详解 一、基础配置
程序员文章站
2022-07-16 18:23:52
...
dataTable用了很久，今天在此总结一下使用方法以及常用属性的解释。
要试用dataTable，首先你得有个table，html代码如下：
<html> <head> <head lang="zh-CN"> <meta charset="UTF-8"> <link href="static/css/main.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="static/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="static/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="static/js/jquery.dataTable.custom.js"></script> </head> <body> <div style="padding: 10px;"> <table id="mainTable" class="table"></table> </div> </body> <script type="text/javascript" src="static/js/main.js"></script> </html>
下面是dataTable配置方式以及参数详解：
/*
* 通过jquery ID筛选器绑定dataTable插件
*/
$("#mainTable").dataTable({
/*
* sErrMode
* 错误信息显示方式
* 分别为alert和throw，默认为alert
*/
"sErrMode" : "throw",
/*
* sDom
* 布局方式，可以自定义，布局项，也可以调换布局顺序
* 详解：
* <> 表示一个闭合的div 例如：<> = <div></div>
* <"类名称"> 表示一个class="类名称"的闭合的div 例如： <"rad"> = <div class="rad"></div>
* l 每行显示的记录数
* f 搜索框
* r 加载时的进度条
* t 表格，即实际的<table></table>
* p 分页条
* i 数据信息， 每页显示x条数据、第x条-第x条、供x条数据，默认是英文
*/
"sDom" : '<lf>rt<lpi><"clear">',
/*
* sServerMethod
* 数据获取方式
* POST/GET，默认是GET
*/
"sServerMethod" : "POST",
/*
* bDeferRender
* 是否启用延迟加载：当你使用AJAX数据源时，可以提升速度。
* 默认为false
*/
"bDeferRender" : true,
/*
* sScrollXInner
* 表格宽度
*/
"sScrollXInner" : "100%",
/*
* bScrollCollapse
* 当显示的数据不足以支撑表格的默认的高度时，依然显示纵向的滚动条。(默认是false)
*/
"bScrollCollapse" : false,
/*
* bPaginate
* 是否开启分页,默认是true
*/
"bPaginate" : true,
/*
* bLengthChange
* 是否允许用户，在下拉列表自定义选择分页大小(10, 25, 50 and 100),需要分页支持
* 默认为true
*/
"bLengthChange" : false,
/*
* bFilter
* 是否启用内置搜索功能：可以跨列搜索。
* 默认为true
*/
"bFilter" : true,
/*
* bSort
* 是否开启列排序功能，如果想禁用某一列排序，可以在每列设置使用bSortable参数
*/
"bSort" : true,
/*
* bInfo
* 是否显示表格相关信息：例如翻页信息等。
* 默认值：True
*/
"bInfo" : true,
/*
* bAutoWidth
* 是否启用自动适应列宽
* 默认值：True
*/
"bAutoWidth" : false,
/*
* bStateSave
* 是否开启cookies保存当前状态信息
* 默认值：false
*/
"bStateSave" : false,
/*
* sPaginationType
* 分页方式
* dataTable提供full_numbers和two_button，默认是two_button
* 这里采用的是自定义分页myPagination，详细参见jquery.dataTable.custom.js
*/
"sPaginationType" : "myPagination",
/*
* bProcessing
* 是否显示加载时进度条，默认为false
*/
"bProcessing" : true,
/*
* iDisplayLength
* 默认每页显示多少条记录
*/
"iDisplayLength" : 10,
/*
* aLengthMenu
* 允许用户选择每页显示多少条记录
*/
"aLengthMenu" : [ [ 50, 100, -1 ], [ "50", "100", "所有" ] ],
/*
* oLanguage
* 语言设置，dataTable默认为英文，可再此设置中文显示
* 注意：_MENU_、_START_、_END_、_TOTAL_、_MAX_等通配
*/
"oLanguage" : {
"sLengthMenu" : "每页显示 _MENU_ 条记录",
"sZeroRecords" : "对不起，没有匹配的数据",
"sInfo" : "第 _START_ - _END_ 条 / 共 _TOTAL_ 条数据",
"sInfoEmpty" : "没有匹配的数据",
"sInfoFiltered" : "(数据表* _MAX_ 条记录)",
"sProcessing" : "正在加载中...",
"sSearch" : "全文搜索：",
"oPaginate" : {
"sFirst" : "第一页",
"sPrevious" : " 上一页 ",
"sNext" : " 下一页 ",
"sLast" : " 最后一页 "
}
},
/*
* aoColumns
* 数据列
* mData 数据源属性
* sTitle 列头
* bSortable 是否参与排序
* mRender 自定义显示内容，可返回html、字符串
*/
"aoColumns" : [{
"mData" : 'id',
"sTitle" : "ID",
"bSortable" : true
},{
"mData" : 'name',
"sTitle" : "Name",
"bSortable" : true
},{
"mData" : 'age',
"sTitle" : "Age",
"bSortable" : true,
"mRender" : function(data, type, row) {
return data;
}
},{
"mData" : 'work',
"sTitle" : "Work",
"bSortable" : true
}],
/*
* fnInitComplete
* 表格初始化完成后的回调
*/
"fnInitComplete" : function(){
},
/*
* fnDrawCallback
* 表格绘制完成后的回调
*/
"fnDrawCallback" : function(){
},
/*
* 数据源url，ajax请求路径
*/
"sAjaxSource" : "xx/xx/xxx/xxx/xxx"
});
dataTable是靠ajax请求获取数据的，数据格式为json，json数据必须归属与aaData属性：
{
"aaData": [
{
"id": 1,
"name": "rozer",
"age": "20",
"work": "java"
},
{
"id": 2,
"name": "bick",
"age": "20",
"work": "python"
}
]
}
具体的配置已经在上述代码里面描述过，dataTable还有其他试用技巧、自定义样式、api等，将在后续文章中写到。
最后，诚心诚意，附上代码一套，另含dataTable自定义样式一份，以作参考。
注：代码要运行在nginx或apatch上，测试时，将以下属性值修改为你的ajax请求url，其他配置修改，请参见代码注释。
例如： "sAjaxSource" : "static/js/test-data.js"
上一篇： PCA简化数据
推荐阅读
-
Android基础控件RadioGroup使用方法详解
-
超新手入门教程:AI基础工具使用详解
-
详解使用element-ui table组件的筛选功能的一个小坑
-
android基础教程之context使用详解
-
详解Nginx服务器中map模块的配置与使用
-
脱离脚手架来配置、学习 webpack4.x （一）基础搭建项目
-
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
-
spring基础系列之JavaConfig配置详解
-
IOS-—UICollectionView使用综述（一 ）（基础篇--垂直列表方式，横向相册方式）
-
Nginx服务器基础的安全配置与一些安全使用提示