Datatables详细使用教程以及参数理解

来源：互联网发布：艾利丹尼森知乎编辑：程序博客网时间：2024/06/07 21:45

在项目中制作表格一直使用DataTables,本人觉得他非常强大、使用、方便、漂亮，我把个人使用的经验记录下来

先新建一个简单的table.html文件

<!DOCTYPE html><head>    <meta charset="utf-8">    <title>table</title></head><body>    <div id="table" style="height:400px"></div></body>

使用<script src="js/Datatable.js"></script>加载我们需要适应的插件。
把表格初始化到创建的div中，实例如下

var myTable = $("#table").DataTable({            "dom": 'tip',            "loadingRecords": "加载中...",            "info": true,            "pageLength": 10,//需要每页显示的条数            "sPaginationType": "full_numbers",            "autoWidth": true,            "ordering": false,            "oLanguage": {                        "sLengthMenu": "每页 _MENU_ 条记录",                        "sZeroRecords": "没有找到记录",                        "sInfo": "从" + " _START_ " + 到 + " _END_ /" + 共 + " _TOTAL_ " + 条数据,            "sInfo": "第 _PAGE_ 页 ( 共 _PAGES_ 页 )",                        "sInfoEmpty":"",                        "sInfoFiltered": "(" + 从总共 + "_MAX_" + 条记录中过滤 + ")",                        "oPaginate": {                            "sFirst": "首页",                            "sPrevious": "上一页",                            "sNext": "下一页",                            "sLast": "末页"                        }                    },            "columns":[                {"title":"","mData":"","class":"","render":},             {"title":"","mData":"","class":"","render":},             {"title":"","mData":"","class":"","render":},             {"title":"","mData":"","class":"","render":}                      ],            "ajax": function(data, callback, settings){                this._ajax($.u.config.constant.smsqueryserver, $.extend({}, data, {                    "method": "",                    "dataobject":"",                    "rule": ,                }), function(response) {                    if (response.success) {                        callback({                            "recordsFiltered": response.data.recordsFiltered,                            "data": response.data                        });                    }                });            },            "refresh": function() {            },            "headerCallback": function(thead, data, start, end, display) {},            "rowCallback": function(row, data, index) {}        })

添加上接口数据，表格初始化加载成功；
4. 下面是对应的参数介绍。

功能参数  数据参数 列定义参数

功能参数
autoWidth（参数名）
定义是否由控件自动控制列宽（说明）
Boolean（参考值）
true（默认值）
以下的介绍顺序如此
info
控制总数信息(标准界面右下角显示总数和过滤条数的控件)的显隐
Boolean
true

lengthChange
控制是否能够调整每页的条数,如果设为false,标准的每页条数控制控件也会被隐藏.
Boolean
true

ordering
全局控制列表的所有排序功能.
Boolean
true

paging
全局控制列表的翻页功能,如果设为false,所有的默认翻页控件会被隐藏
Boolean
true

processing
控制是否在数据加载时出现”Processing”的提示,一般在远程加载并且比较慢的情况下才会出现. 样式需要定义,否则比较丑.
Boolean
false

scrollX

控制在列过多过宽是,是否出现水平滚动条.注意使用这个参数时最好关闭响应式设计
Boolean
false

scrollY
定义一个高度,当列表内容超过这个高度时,显示垂直滚动条,这个高度不算表头和翻页搜索等工具条的空间.支持数字或者css写法比如:
200或者’200px’
Number / String
无

searching
控制控件的搜索功能,如果为false,控件的搜索功能被完全禁用,而且默认搜索组件会被隐藏.
Boolean
true

serverSide
当设为true时,列表的过滤,搜索和排序信息会传递到Server端进行处理,实现真翻页方案的必需属性.反之,所有的列表功能都在客户端计算并执行
Boolean
false

2.数据参数
data（参数名）
以Javascript数组对象方式设定列表显示数据（说明）
数组对象（参考值）

以下介绍顺序一样

ajax（两种模式）
1. String模式: 直接传入一个string作为远程ajax请求路径(说明)
String（参考值）
2. 对象模式: 支持JQuery.ajax函数的参数设置,支持type,url等标准参数. 例如:
$(‘#example’).dataTable( {

“ajax”: {

"url": url,"type": "POST"

}
} ); （说明）
JQuery ajax 函数对应参数（参考值）

ajax.data（参数）
和标准JQuery.ajax的data参数作用类似,但效果有所不同.仅当 serverSide参数为true的时候,参数属性才有意义,当serverSide开启,DataTables组件会自行封装一个信息类发送给服务端,而ajax.data仅仅是对这个信息类进行调整和添加.
添加方式, ajax.data可以直接赋值一个对象,这个对象的属性会添加到原信息类里面去一起发送到服务端.例如:
$(‘#example’).dataTable( {

"ajax": {  "url": "data.json",  "data": {      "user_id": 451}

}

} );

另外一种选择是传入一个方法,方法的参数就是当前发送到服务器的信息类,在方法中可以修改这个信息类.
(‘#example’).dataTable( {
  “ajax”: {
    “url”: “data.json”,
    “data”: function ( d ) {
        d.extra_search =(‘#extra’).val();
}
}
} ); （说明）
对象或者方法（参考值）

ajax.dataSrc
定义服务器返回对象里面保存数据的属性名称,默认为data,也即是说,在返回的Json数据中,所有列表数据保存在data属性中,这个属性不太建议修改.

6.列定义参数
columns
列的初始状态的定义,该参数一个是对象数组,每一个对象元素定义一个列.注意,不需定义的列也必须以null占位,比如:

“columns”: [
{ “searchable”: false },
null,
null
]
Array
无

columnDefs
和columns设置非常类似,但可以通过targets属性可以根据灵活的选择需要设定的列.比columns更加灵活.比如:
“columnDefs”: [ { //个人理解为它是对列的重定向
“targets”: 0,
“searchable”: false
} ]

targets可以有多种写法:
0或者正整数(可用数组): 表示正向列的索引
负数(可用数组): 表示反向列的索引
字符串: 匹配th的class来选择列.
“_all”: 所有列,也是默认值.

columns.data
列的数据名,对应数据里面的属性名
String
无

columns.name
给列设置独立的名称,目前看意义不大
String

columns.orderable
设置列是否允许排序
Boolean
true

columns.searchable
设置列是否允许过滤
Boolean
true

columns.type
通过设置列的类型让控件在排序和过滤这个列是能更好的处理这个列的数
String
无

columns.visible
设置列的可见性,true为显示
Boolean
true

columns.width
强行设置列的宽度,支持数字和任何CSS写法,比如20%.
String
无

columns.render
非常有用的函数,自定义列的内容.该属性比较常见的用法是函数用法,通过这个函数可以自定义改造列的任何内容,如果要在列中显示比较复杂的内容,这是一个比较好的选择.比如在列中加入功能按钮.
例如:
“render”: function ( data, type, row, meta ) {
//可以理解为重定函数，对某一列的重新定义或者书写
return ‘Download‘;
}
4个属性的意思是:
data : 当前单元格的数据
type: 当前列的类型
row: 当前行完整的数据对象
meta: 为一个子对象,包含3个属性
row: 当前行的索引
col: 当前列的索引
settings: 当前DataTables控件的setttings对象
Function
无

7.datatable其实还有配置项。
需要可以在https://www.datatables.net/examples/index查找到相关的配合参数。
8.以上算是完成一个不是特殊要求的表格要求制作。

0 0