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,是关于如何优化 ...
随机推荐
- 编写第一个Qt程序
http://c.biancheng.net/view/1817.html 学习一种编程语言或编程环境,通常会先编写一个“Hello World”程序.我们也用 Qt Creator 编写一个“Hel ...
- 03python面向对象编程之多态和枚举6
7.多态性 对于弱类型的语言来说,变量并没有声明类型,因此同一个变量完全可以在不同的时间引用不同的对象.当同一个变量在调用同一个方法时,完全可能呈现出多种行为(具体呈现出哪种行为由该变量所引用的对象来 ...
- P4513 最大连续字段和 （线段树+区间合并）
题目链接:https://www.luogu.org/problem/P4513 题目大意:单点修改和求区间最大连续字段和 解题思路:很容易想到是用线段树来做,但是如何进行维护呢? 每个维护区间 [L ...
- Android相关资源
各类黑客大会资料 https://infocon.org/cons/ 各类课程.视频 https://github.com/Developer-Y/cs-video-courses#security ...
- 16 | “order by”是怎么工作的？ 学习记录
<MySQL实战45讲>16 | “order by”是怎么工作的? 学习记录http://naotu.baidu.com/file/0be0e0acdf751def1c0ce66215e ...
- 小程序里的自定义组件：组件的外部样式externalClasses的使用
启用外部样式: 自定义组件: v-tag 在html 引入 在组件写外部样式的css : .ex-tag { background-color: #fffbdd ; } 在组件使用该外部的样式 这个时 ...
- 大数据学习笔记之初识Hadoop
1.Hadoop概述 1.1 Hadoop名字的由来 Hadoop项目作者的孩子给一个棕黄色的大象样子的填充玩具的命名 Hadoop的官网:http://hadoop.apache.org . 1.2 ...
- 安卓手机通过有线连接PC上网
因手机wifi坏了,速度上限为2.5m/s.无法发挥出100m带宽的威力. 这里探索各大神的指导,记录下其中一种方式. :链接 主题:使用openvpn和手机的USB共享网络 通过mico ...
- 6359. 【NOIP2019模拟2019.9.15】小ω的树(tree)（定期重构）
题目描述 题解 qy的毒瘤题 CSP搞这种码农题当场手撕出题人 先按照边权从大到小建重构树,然后40%暴力修改+查找即可 100%可以定期重构+平衡规划,每次把B个询问拉出来建虚树,在虚树上暴力维护每 ...
- js加密php解密（CryptoJS）碰到的坑
今天做了一个功能,需要js传密码到php文件,对js密码 进行判断,为想为这个传输过程进行解密,参考了网上的一个方法(这个方法我只是使用了,并没有太深了解0.0) 首先要引入3个js文件 (在网上可搜 ...