dataTables使用的详细说明整理
本文共三个部分：官网|基本使用|遇到的问题
一、官方网站：http://www.datatables.club/
二、基本使用：
1、dataTables的引入及初始化
<!--第一步：引入Javascript / CSS （CDN）-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css"> <!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<!--第三步：初始化Datatables-->
$(document).ready( function () {
$('#example').DataTable();
} );
2、dataTables的基础属性配置
"bPaginate": true, //翻页功能
"bLengthChange": true, //改变每页显示数据数量
"bFilter": true, //过滤功能
"bSort": false, //排序功能
"bInfo": true,//页脚信息
"bAutoWidth": true//自动宽度
3、关于排序的四个属性区分
- bSort : 初始化的时候可以定义整个表格是否需要进行排序
$(document).ready( function () {
$('#example').dataTable( {
"bSort": false
} );
} ); - aaSorting : 初始化的时候可以用来定义表格根据哪一列进行排序
$(document).ready( function() {
$('#example').dataTable( {//先对第二列降序排列，在对第四列升序排列
"aaSorting": [[1,'desc'], [3,'asc']]
} );
} ); - bSortable : 初始化的时候可以用来定义哪一列可以进行排序
$(document).ready( function() {
$('#example').dataTable( {
"aoColumns": [
{ "bSortable": false },
null,
null,
null,
null
] } );
} ); - asSorting : 可以用来设置某一行的排序规则
$(document).ready( function() {
$('#example').dataTable( {
"aoColumns": [
null,
{ "asSorting": [ "asc" ] },
{ "asSorting": [ "desc", "asc", "asc" ] },
{ "asSorting": [ "desc" ] },
null
]
} );
} );
4、展示一个表格的基本配置
$('#myTable').dataTable({
"bJQueryUI": true,//是否使用jquery中的ui theme
"bProcessing": true, //DataTables载入数据时，是否显示‘进度’提示
"bServerSide": false, //是否启动服务器端数据导入,也就是调用后台数据的时候
"bStateSave": true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
"sPaginationType": "full_numbers",//详细分页组，可以支持直接跳转到某页
"bScrollInfinite": false, //是否启动初始化滚动条
"bScrollCollapse": false, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
"bPaginate": true, //翻页功能
"aLengthMenu": [5, 10, 15], //更改显示记录数选项
"iDisplayLength": 9, //默认显示的记录数
"sScrollY": 300,//规定表格高度，出现滚动条
"sScrollX": "50%",////是否开启水平滚动，以及指定滚动区域大小,可设值：'disabled','2000%'
"bLengthChange": true, //改变每页显示数据数量
"bFilter": true, //过滤功能
"bSort": false, //排序功能，初始化的时候定义整个表格是否进行排序
"bInfo": true,//页脚信息，即表格左下角显示多少条数据的提示
"bAutoWidth": true,//自动宽度，false为禁止自动计算列宽
// 'aaSorting': [[2, 'asc']],//bSort失效
"aaData": [
{
"Id": "001",
"Name": "ta",
"Salary": "320,800",
"Date": "2012-10-10",
"Office": "IJD",
"Show": "X"
},
{
"Id": "002",
"Name": "张三",
"Salary": "450,800",
"Date": "2012-3-19",
"Office": "DPD",
"Show": "X"
},
{
"Id": "003",
"Name": "李四",
"Salary": "120,800",
"Date": "2013-3-21",
"Office": "ICD",
"Show": "C"
},
{
"Id": "004",
"Name": "王五",
"Salary": "50,800",
"Date": "2011-11-11",
"Office": "ISD",
"Show": "X"
},
{
"Id": "005",
"Name": "张张",
"Salary": "780,800",
"Date": "2013-2-22",
"Office": "ADM",
"Show": "X"
},
{
"Id": "006",
"Name": "ni",
"Salary": "320,800",
"Date": "2012-10-10",
"Office": "IJD",
"Show": "X"
},
{
"Id": "007",
"Name": "张三",
"Salary": "450,800",
"Date": "2012-3-19",
"Office": "DPD",
"Show": "X"
},
{
"Id": "008",
"Name": "李四",
"Salary": "120,800",
"Date": "2013-3-21",
"Office": "ICD",
"Show": "C"
},
{
"Id": "009",
"Name": "王五",
"Salary": "50,800",
"Date": "2011-11-11",
"Office": "ISD",
"Show": "X"
},
{
"Id": "010",
"Name": "张张",
"Salary": "780,800",
"Date": "2013-2-22",
"Office": "ADM",
"Show": "X"
},
{
"Id": "011",
"Name": "wo",
"Salary": "320,800",
"Date": "2012-10-10",
"Office": "IJD",
"Show": "X"
},
{
"Id": "012",
"Name": "张三",
"Salary": "450,800",
"Date": "2012-3-19",
"Office": "DPD",
"Show": "X"
},
{
"Id": "013",
"Name": "李四",
"Salary": "120,800",
"Date": "2013-3-21",
"Office": "ICD",
"Show": "C"
},
{
"Id": "014",
"Name": "王五",
"Salary": "50,800",
"Date": "2011-11-11",
"Office": "ISD",
"Show": "X"
},
{
"Id": "015",
"Name": "",
"Salary": "780,800",
"Date": "2013-2-22",
"Office": "ADM",
"Show": "X"
}
],
"aoColumns": [//sClass设置列的class属性值，bSearchable设置列的数据是否过滤，bVisible设置列是否显示，sTitle设置列的标题
{
"data": "Id", 'sTitle': 'Id', 'sWidth': '100px', 'sClass': 'center', "bVisible": false,
},
{
"data": "Name", 'sTitle': '姓名', 'sWidth': '20%', 'sClass': 'center', "sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
},
{ "data": "Salary", 'sTitle': '工资', 'sWidth': '20%', 'sClass': 'center' },
{ "data": "Date", 'sTitle': '入职日期', 'sWidth': '20%', 'sClass': 'center' },
{
"data": "Office", 'sTitle': '所属部门', 'sWidth': '20%', 'sClass': 'center'
},
{
"data": "Show", 'sTitle': '是否显示ID', 'sWidth': '20%', 'sClass': 'center', "bSearchable": false,
"mRender": function (data, type, full) {//data表示该列的数据
// return '<input type="text" class="userName" value="' + full + '"/>';
if (data === 'X') {
return '不显示'
} else {
return '显示'
}
}
}
],
"oLanguage": {//国际化配置
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起，查询不到相关数据！",
"sEmptyTable": "表中无数据存在！",
"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
}
});
5、使用Ajax与后台交互数据时，将bServerSide属性置为true，涉及属性fnServerData
"sAjaxSource": "url",//接口路径
"fnServerData": function (sUrl, aoData, fnCallback) {
$.ajax({
"url": sUrl,
"type": 'POST',
"dataType": 'json',
"contentType": "application/x-www-form-urlencoded; charset=utf-8",
"cache": false,
"data": aoData,
"success": (res) => {
//console.log(res.data.data)
fnCallback(res.data.data)
}
})
}
三、实例展示
1、引入文件
2、创建js文件
var iDisplayStart = ;
var iDisplayLength = ; $('#tableList').dataTable({
"bJQueryUI": true,//是否使用jquery中的ui theme
"bProcessing": true, //DataTables载入数据时，是否显示‘进度’提示
"bServerSide": true, //是否启动服务器端数据导入,也就是调用后台数据的时候
"bStateSave": false, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
"sPaginationType": "full_numbers",//详细分页组，可以支持直接跳转到某页
"bScrollInfinite": false, //是否启动初始化滚动条
"bScrollCollapse": false, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
"bPaginate": true, //翻页功能
// "aLengthMenu": [5, 10, 15], //更改显示记录数选项
// "iDisplayLength": 9, //默认显示的记录数
// "sScrollY": 100,//规定表格高度，出现滚动条
// "sScrollX": "50%",////是否开启水平滚动，以及指定滚动区域大小,可设值：'disabled','2000%'
// "bLengthChange": true, //改变每页显示数据数量
"bFilter": false, //过滤功能
"bSort": false, //排序功能，初始化的时候定义整个表格是否进行排序
"bInfo": false,//页脚信息，即表格左下角显示多少条数据的提示
"bAutoWidth": true,//自动宽度，false为禁止自动计算列宽
// 'aaSorting': [[2, 'asc']],//bSort失效
"iDisplayStart": iDisplayStart,
"iDisplayLength": iDisplayLength,//默认显示的记录数
// "aaData": [
// {
// }
// ],
"columns": [//sClass设置列的class属性值，bSearchable设置列的数据是否过滤，bVisible设置列是否显示，sTitle设置列的标题
// {bVisible表示不再表格中显示
// "data": "caseId", 'sTitle': '序号', 'sWidth': '8%', 'sClass': 'center', "bVisible": false, "bSortable": false, "bUseRendered": false
// },
{
"data": "caseId", 'sTitle': '序号', 'sWidth': '2%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false
},
{
"data": "caseName", 'sTitle': '案件名称', 'sWidth': '20%', 'sClass': 'text-center', "sDefaultContent": "", "bSortable": false, "bUseRendered": false //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
},
{
"data": "caseCode", 'sTitle': '序号', 'sWidth': '14%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false
},
{
"data": "caseCauseName", 'sTitle': '原因', 'sWidth': '8%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false
},
{
"data": "underTakerName", 'sTitle': '收押人', 'sWidth': '8%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false
},
{
"data": "managerName", 'sTitle': '管理人员', 'sWidth': '8%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false
},
{
"data": "registerDate", 'sTitle': '日期', 'sWidth': '8%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false
},
{//自定义列
"mDataProp": "userType",
'sTitle': '登录用户角色',
'sWidth': '10%',
'sClass': 'text-center',
// "fnRender": function (oObj) {
// if (oObj.aData.userType == '1' || oObj.aData.userType == '3') {
// return '用户'
// } else {
// return '管理员'
// }
// },
"bSortable": false,
"bUseRendered": false
},
{
"sDefaultContent": "",
'sTitle': '操作',
'sWidth': '7%',
'sClass': 'text-center',
"render": function (data, type, full) { // 返回自定义内容
return "<span id='factorConfirm' style='display:inline-block;color:#01d1b8;text-decoration:underline;padding-bottom:3px;cursor:pointer'>跳转按钮</span>";
}
}
],
"fnRowCallback": function (nRow, aData, iDisplayIndex) {//格式化数据
//iDisplayIndex指当前行的序号 每行加载完成，将当前列进行替换
if (aData.userType == '' || aData.userType == '') {
$('td:eq(7)', nRow).html('用户');
} else {
$('td:eq(7)', nRow).html('管理员');
}
return nRow;
},
"oLanguage": {//国际化配置
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起，查询不到相关数据！",
"sEmptyTable": "表中无数据存在！",
"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
},
"sAjaxSource": requestUrl,//接口路径
"fnServerData": function (sUrl, aoData, fnCallback) {
$.ajax({
"url": sUrl,
"type": 'GET',
"dataType": 'json',
"dataSrc": '',
"contentType": "application/x-www-form-urlencoded; charset=utf-8",
"cache": false,
"data": aoData,
"sDom": "frtlip",
"sPaginationType": "full_numbers",
"success": (res) => { //处理返回的数据
fnCallback(handleData(res)); //处理返回的数据 // 点击跳转按钮
$("#factorConfirm").on('click', function (e) {
//获取本行数据(对象）
var currentData = $('#tableList').DataTable().row($(this).parents('tr')).data();
window.location.href = window.location.origin + '/html/ceshi.html?name=' + name + "&age=" + age
});
},
"error": function (xhr, error, thrown) {
top.showInfoWinError("发生异常:" + error);
}
})
}
});
function handleData(json) { // 处理返回的数据
var obj = { code: };
obj.iTotalDisplayRecords = obj.iTotalRecords = json.body.data.length;
obj.aaData = json.body.data;
return obj;
}
四、遇到的问题
1、设置列属性'sClass': 'text-center',每列的内容无法居中，样式失效
- 解决方法：引入bootstrap的js、css
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!-- DataTables -->
<script type="text/javascript" charset="utf8"
src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
2、与后台交互的时候，设置了 iDisplayLength 属性为6，属性失效
- 解决方法：
设置翻页属性为true，否则不起作用
"bPaginate": true, //翻页功能
3、当后台数据返回数值型1、2等数字，需要在表格内进行格式化内容
- 解决方法：
设置与columns属性同级的fnRowCallback属性进行列内容格式化 "fnRowCallback": function (nRow, aData, iDisplayIndex) {//格式化数据
//iDisplayIndex指当前行的序号 每行加载完成，将当前列进行替换
if (aData.userType == '' || aData.userType == '') {
$('td:eq(7)', nRow).html('用户');
} else {
$('td:eq(7)', nRow).html('管理员');
}
return nRow;
}
4、需要在每行一列操作列、即后台没有返回该属性，我们需要自定义列
- 解决方法
{
"sDefaultContent": "",//不是data属性
'sTitle': '操作',
'sWidth': '7%',
'sClass': 'text-center',
"render": function (data, type, full) { // 返回自定义内容
return "<span id='factorConfirm' style='display:inline-block;color:#01d1b8;text-decoration:underline;
padding-bottom:3px;cursor:pointer'>要素确认</span>";
}
}
5、后台返回数据后，如何处理才能显示到表格中
- 解决方法
function handleData(json) { // 处理返回的数据
var obj = { code: };
obj.iTotalDisplayRecords = obj.iTotalRecords = json.body.data.length;
obj.aaData = json.body.data;
return obj;
} //success成功后，调用函数
fnCallback(handleData(res))
6、原生JS中，通过url传值，解析参数
- 解决方法
function parseURL(url) {
var url = url.split("?")[];
var para = url.split("&");
var len = para.length;
var res = {};
var arr = [];
for (var i = ; i < len; i++) {
arr = para[i].split("=");
res[arr[]] = arr[];
}
return res;
}
dataTables使用的详细说明整理的更多相关文章
- $_SERVER的详细参数整理下
PHP编程中经常需要用到一些服务器的一些资料,特把$_SERVER的详细参数整理下,方便以后使用. $_SERVER['PHP_SELF'] #当前正在执行 脚本的文件名,与 document roo ...
- dataTables-使用详细说明整理
本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[http://www.datatables.net/] 二:基本使用:[http://www.guoxk.com/node/jqu ...
- [转]dataTables-使用详细说明整理
本文转自:http://blog.csdn.net/mickey_miki/article/details/8240477 本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[htt ...
- Linux系统管理图文详解超详细精心整理
前言:带你遨游于linux系统管理知识的海洋,沐浴春日里的阳光,循序渐进,看完之后收获满满. 本次讲解基于linux(centos6.5)虚拟机做的测试,centos7估计以后有时间再更新啊. lin ...
- SSH框架搭建详细步骤整理
学习Java面前有两座山,一座山叫SSM,一座山叫SSH,跨越了这两座山之后才能感受到这个语言的魅力所在,SSM框架的搭建详细在之前博客已经涉及了,今天来整理SSH框架详细步骤: 生有涯 而 学无涯 ...
- MySQL安装详细图解整理
MySQL安装详细图解 2018-08-19 08:32:33 一.MYSQL的安装 1.打开下载的mysql安装文件mysql-5.0.27-win64.zip,双击解压缩,运行“setup.ex ...
- JavaScripts 基础详细笔记整理
一.JS简介 JavaScript 是 Web 的编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理 ...
- Redis集群搭建详细过程整理备忘
三.安装配置 1.环境 使用2台centos服务器,每台机器上部署3个实例,集群为三个主节点与三个从节点: 192.168.5.144:6380 192.168.5.144:6381 192.168. ...
- [转] 详细整理：UITableView优化技巧
原文:http://www.cocoachina.com/ios/20150602/11968.html 最近在微博上看到一个很好的开源项目VVeboTableViewDemo,是关于如何优化 ...
随机推荐
- Shell编程变量
shell变量 什么是变量,存放了各种数据,在linux怎么定义了变量,name=ken,name就是变量名,ken就是变量值, 但是在shell中,有三种方式: name=ken name='ken ...
- 020-VMware虚拟机作为OpenStack计算节点，上面的虚拟机无法启动问题解决
问题描述: VMware虚拟机作为OpenStack计算节点,如果安装的操作系统是CentOS7.3,则在此计算节点放置的虚拟机无法正常启动,报如下错误: 在创建计算节点时,为了能让 KVM 能创 ...
- Composer\Downloader\TransportException ... Failed to enable crypto，failed to open stream: operation failed
failed to open stream: operation failed 错误详细信息: [Composer\Downloader\TransportException] The "h ...
- oracle汇编01
1: / define numeric label "1"one: / define symbolic label "one"/ ... assembler c ...
- 如何设置Linux虚拟机的IP地址
本文会详细的解释如何在Linux虚拟机下设置IP地址 我的虚拟机是CentOS 首先,打开你的虚拟机 1.修改主机名 修改完主机名之后,别忘了用:wq命令保存退出 然后我们来设置虚拟机的IP地址 首先 ...
- Git工程开发实践（四）——Git分支管理策略
A successful Git branching model https://nvie.com/posts/a-successful-git-branching-model/ Git工程开发实践( ...
- mac+react-native环境搭建
主要参考 https://reactnative.cn/docs/getting-started.html react-native中文网 IOS版 1.Node v10以上.Watchman 和 R ...
- PHP程序员要看的书单
想提升自己,还得多看书!多看书!多看书! 下面是我收集到的一些PHP程序员应该看得书单及在线教程,自己也没有全部看完.共勉吧! Github地址:https://github.com/52fhy/ph ...
- webpack Entrypoint undefined = index.html
报错: module.exports增加配置stats: { children: false }即可解决:
- Spring Boot整合Mybatis出现错误java.lang.IllegalStateException: Cannot load driver class:com.mysql.cj.jdbc.Driver
错误描述: Caused by: java.lang.IllegalStateException: Cannot load driver class: com.mysql.cj.jdbc.Driver ...