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,是关于如何优化 ...
随机推荐
- 简单的python笔试题
1.输出九九乘法口诀 for i in range(1,10): for j in range(1,i+1): print('{}*{}={}'.format(j,i,i*j),end=' ') pr ...
- i3wm 配置刷新生效 和 使用mod快捷打开 ranger 小贴士
在某处学习到了如何配置i3wm后,对其极感兴趣. 学习到的经验总结: Linux中的各种命令操作其实都要首先查阅 man command 或者 command -h 或者 command -- ...
- Linux学习--第六天--软件包
yum在线管理 管理的是rpm包,光盘里面都有 /etc/yum.repos.d下面有四个文件,对应网络yum源,光盘yum源等.如果需要用到哪个源,将其他三个源的enabled设置为0即可. |源配 ...
- Saving James Bond - Easy Version
题目来源: 浙江大学在慕课网上开设的<数据结构>课,陈越老师.何钦铭老师主讲,课后作业的一道题. 题目描述: 题目思路: 这道题目本质上讲就是列出图的连通集,但是这个连通集的起点是有约束的 ...
- Kali Linux的发展史，专为数字取证和渗透测试而设计
Kali Linux拥有非常强大的网络功能,Kali Linux是一个Debian衍生的Linux发行版,专为数字取证和渗透测试而设计.它是由OffensiveSecurityLtd维护和资助,是由M ...
- Arduino通讯串口
串口是Arduino与其它设备进行通信的接口 所有的Arduino控制板有至少一个串口(又称作为UART或USART).它通过0(RX)和1(TX)数字引脚经过串口转换芯片连接计算机USB端口与计算机 ...
- MySQL数据库1初识MySQL
目录 Mysql 一.数据库是什么? 二.为啥使用数据库?(*****) 三.数据库的分类(*****) 1.关系型数据库 2.非关系型数据库 3.关系型与非关系型区别: 四.数据库MySQL的架构 ...
- JavaWeb DOM1
一.BOM的概述 browser object modal :浏览器对象模型. 浏览器对象:window对象. Window 对象会在 <body> 或 <frameset> ...
- android 常用框架总结（转载）
原文:https://blog.csdn.net/weixin_44702125/article/details/89886948
- USACO Overplanting ( 线段树扫描线 )
题意 : 在二维平面上给出 N 个矩形,问你所有矩形构成的图案的面积是多少(相互覆盖的地方只计算一次) 分析 : 求矩形面积并可以模拟来做,不过使用线段树来辅助做扫描线可以更高效地求解 扫描线顾名思 ...