前端开发技术栈（插件篇）：datatables

SteveRocket

已于 2023-06-27 17:11:30 修改

阅读量3.7k

点赞数 3

分类专栏： # 前端开发(H5/JS/JQuery/Ajax) 文章标签：前端插件

于 2023-01-04 01:15:49 首次发布

本文链接：https://blog.csdn.net/zhouruifu2015/article/details/128541678

版权

前端开发(H5/JS/JQuery/Ajax) 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

4.4、columns – ajax数据源

4.5、columnDefs - 添加列默认值

1、columns和columndefs的区别：

注意：后续技术分享，第一时间更新，以及更多更及时的技术资讯和学习技术资料，将在公众号CTO Plus发布，请关注公众号：CTO Plus

一、Datatables介绍

官网地址：https://datatables.net/

DataTables中文网：http://datatables.club/

1、Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

2、分页，即时搜索和排序。

3、几乎支持任何数据源：DOM，javascript，Ajax 和服务器处理。

4、支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation。

5、各式各样的扩展: Editor, TableTools, FixedColumns….

6、丰富多样的option和强大的API。

7、支持国际化。

8、免费开源。

二、开始使用Datatables

1、下载：

http://datatables.net/releases/DataTables-1.10.12.zip

2、引入库

只需要引入三个文件即可，jQuery库，一个DT的核心js文件和一个DT的css文件

3、添加HTML 代码

<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>

4、初始化Datatables

$(document).ready( function () {
        $('#table_id').DataTable();
});

匿名函数方式初始化：

$(document).ready(function(){
        $("#table_id").DataTable();
});

三、Datatables国际化

DataTables 默认的字符是英文，也可以翻译成其他语言或定制的字符。

Datatables中所使用的语言选项是通过 language 来配置的。这是一个对象字符串，通过一个参数来描述Datatables的每个部分，语言选项的配置与其他配置方式完全相同，作为初始化设置的一部分;

1、初始化方式：

language: {

sLengthMenu: “显示 _MENU_ 项结果”,
sSearch:“搜索：” // 或 search:"搜索：“

}

2、引入文件方式：

将语言信息写入文件，并在初始化部分引入。

3、把语言定义在文件中，使用language.url选项来初始化：

language:{
//url:"./localisation/zh_CN.txt"
url:"./localisation/Chinese.json"
}

* 根据需要对Datatables中语言选项进行设置。任何不指定的选项,将使用Datatables中默认值

Chinese.json示例：

{
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
    "sFirst": "首页",
    "sPrevious": "上页",
    "sNext": "下页",
    "sLast": "末页"
},
"oAria": {
    "sSortAscending": ": 以升序排列此列",
    "sSortDescending": ": 以降序排列此列"
}
}

四、Datatables属性

4.1、隐藏功能框

1、searching:false 禁用搜索

2、info:false 隐藏显示从几到几(共几条)

3、ordering: false 禁用排序功能自定义序号无效

4、pageLength:1 控制每页显示的条数数字表示条数

5、bPaginate:false 禁用上页下页翻页以及指定显示的条数

6、pagingType:"full_numbers“ 显示首尾页以及上下页

4.2、保存状态

Datatables设置 stateSave选项后，可以保存最后一次分页信息、排序信息，当页面刷新，或者重新进入这个页面，恢复上次的状态。

这个状态的保存用了html5的本地储存和session储存，这样更加有效率。如果你的数据是异步获取的，你可以使用 stateSaveCallback和 stateLoadCallback选项.

需要注意的是，这个特性不支持ie6、ie7

默认情况下，这个状态会保存2小时，如果你希望设置的时间更长，通过设置参数 stateDuration来初始化表格，这个参数值也可以控制是本地储存(0~更大)还是session储存(-1)

Datatables设置 stateSave选项初始化后，实现的状态保存

$('#table_id').DataTable( {

stateSave: true

} );

4.3、隐藏列

1、有些数据不希望显示在屏幕上，或者需要什么条件才会显示，被隐藏的列依然是表格的一部分，也可以搜索和访问被隐藏的列的相关内容。

例：Age和Sex两列不显示（隐藏的列不会生成dom，他存在于DT的内部数据中），并且不能被搜索到。

"columnDefs": [

{

"targets": [ 2 ],

"visible": false,

"searchable": false

{

"targets": [ 3 ],

“visible”: false,

”Searchable”:false

}

]

属性

“targets”: [ 2 ] 跟数组下标一样，第一列从0开始

“visible”: false false表示隐藏，true表示显示（默认）

”Searchable”:false false表示不能被搜索到，true表示可以被搜索到（默认）

4.4、columns – ajax数据源

1、Datatables最简单的ajax数据源的用法

$("#table_id2").dataTable({
"ajax":"data/arrays.txt"
});

之所以能不写columns是因为dt默认可以处理数组格式的数据,按照数组的顺序0,1，2……对应第一列，第二列

2、通过使用 columns.dataDT 选项用于告诉Datatables找到每一列的数据源对象中对应的属性。

$(“#table_id”).dataTable({
    “ajax”:“data/objects.txt”,
    columns:[
    {“data”:“name”},
    {“data”:“position”},
    {“data”:“start_date”},
    {“data”:“office”},
    {“data”:“extn”}
    ]});

3、Datatables也可直接接受一个js数组来初始化表格（引入JS文件：<script src="data/data.js"></script>）

$('#table_id3').dataTable( {
    "data": dataSet,
    "columns": [
        { "title": "Engine"},
        { "title": "Browser" },
        { "title": "Platform" },
        { "title": "Version" },
        { "title": "Grade"}
    ]});

示例：

数据模型 array：["Tiger Nixon", "System Architect", "2011/04/25", "Edinburgh", "5421"]

数据模型 objects：{ "name": "Tiger Nixon", "position": "System Architect", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" }

4.5、columnDefs - 添加列默认值

添加列默认值

作用：为空的格子赋默认值，防止弹出：DataTables Waring。

用法：作为初始化的一个属性

columnDefs:[
    {
        //defaultContent:“”,//赋一个空字符串的值
        defaultContent:“-”,
        targets:“_all”

}

]

_all：表示指定所有列 0：表示第一列（列下标从0开始） -1：表示倒数第一列，负数

4.6、添加滚动条与分页

通过设置paging选项，禁止表格分页(默认是打开的)

1、禁用分页，超过100像素就显示滚动条

paging: false
scrollY: 100 垂直滚动条

pagingType: “full_numbers“ 打开分页

scrollX: true 水平滚动条

4.7、默认排序

在datatables初始化时可以使用order选项指定列怎么排序，order可以接受多个二维数组数据，数组第一个位置表示第几列，第二个位置表示标示asc(升序)或desc(降序)。

例：与数组的下标一样，第一列从0开始，这里表格初始化时，第2列升序，第3列降序

order:[[1,"asc"],[2,"desc"]]

4.8、列渲染

例：把Age列隐藏，通过columns.render方法把Age的值拼接到Name列

columnDefs:[{

render:function(data,type,row){

return data + '('+ row[2]+')';

targets:1

{

visible:false,

targets:[2]

}]

4.9、服务器获取数据源

Datatables有许多方法来获取你的数据，如果你的数据量比较大，这个时候你需要使用服务器模式来处理你的数据。在服务器模式下，所有的分页，搜索，排序等操作，Datatables都会交给服务器去处理。所以每次绘制Datatables，都会请求一次服务器获取需要的数据。

通过配置serverSideDT 这个属性来打开Datatables的服务器模式，下面的例子展示了Datatables打开服务器模式。

1、ajax请求服务器中的数据

方式一：函数名称方式

ajax: {

url:“{{ url_for(‘server_data’) }}“
}

方式二：路由地址方式

ajax: {

url:”/server_data“
}

2、绑定数据源
      columns: [
                { data: “engine”},
                { data: "browser"},
                { data: "time" },
                { data: "name" },
                { data: "number"}
         ]

数据模型：{"engine":"Tiger Nixon", "browser":"System Architect","time":"2011/04/25", "name":"Edinburgh", "number":"5421"}

4.10、添加新列与数据源的绑定

1、ajax请求服务器中的数据

ajax: {

url:"{{ url_for('server_data') }}"
}

2、绑定数据源
columns: [

{ data:null },//不绑定数据源

{ data: "engine"},//绑定数据源
{ data: "browser"},

{ data: "time" },

{ data: "name" },

{ data: "number"}

]

3、添加新列与默认值，解决警告问题

columnDefs:[
{
              targets:6,
              data:"操作",
              render:function (data,type,row) {
                  return "<a title='编辑' class='btn btn-xs btn-info changetype' href='#' >编辑</a>  "+
                                  "<a title='删除' class='btn btn-xs btn-danger' href='#'>删除</a>";
              }
      },
      {
       defaultContent:"",
       targets:"_all"
      }

]，

order:[[5,"asc"]]

上面所有的属性均为DT实例化中的内容

DT 实例化：var dts = $(‘#table_id’).DataTable({});

还可以通过order指定列进行排序：

order 这个配置项的作用是，设置默认的排序列为第6列，升序。

为什么？因为 DT 默认会设置第一列升序排列，既然已经是行号了那就没必要了，所以，还可以指定别的列进行排序。

4、给未绑定数据源列添加索引

自定义序号
dts.on("order.dt search.dt",function(){
        dts.column(0,{
            search:"applied",
            order:"applied"
        }).nodes().each(function (cell,i) {
            cell.innerHTML = i + 1;
        });
    }).draw();

on 为 jQuery 里监听事件的方法，给元素绑定监听事件，这里监听了 order.dt 、search.dt 两个事件，意思是当排序和搜索后，重新生成行号。

dts.column(0,{selector}).nodes() 这个的作用是获取第一列的 DOM 元素，接着用 each 方法遍历，把行号设置进去。这里 {selector} 为 DT 的高级应用。

draw 最后一个重绘方法，生成序号后，重新绘制。DT 的每个操作，包括排序、过滤、翻页还是自己使用API操作这些操作或者是设置了数据都要再调用 draw 方法才行。

五、案例：借助Bootstrap美化

使用方法：只需要引入Datatables已经写好的css样式和js即可。

在<table>后面添加：

table table-hover 鼠标悬停的行的背景变为灰色

table table-condensed 减小行间距

向<tr>添加：.success、.error、.warning、.info、 .active、 .danger

样式1

样式2

六、总结

1、columns和columndefs的区别：

1.1、两个参数可以同时使用，但是columns定义的优先级最高，columns先执行，columnDefs后执行。

1.2、columnDefs比columns多一个属性 columnDefs.targetsDT，有了这个属性就可以做很多columns做不到的事情。

1.3、columns：设置特定列的初始化属性，可以定义数组设置多列，数组长度必须等于表格的数量，只想使用默认值可以设为“NULL”，数组每个元素只能设置单列的属性。

1.4、columnDefs：与columns非常相似，该数组可以针对特定的列，多列或者所有列定义。数组可以任意长度。

通过targets参数设置一个列或者多列，该属性定义可以如下：

0或正整数 - 从左边的列索引计数

负整数 - 列索引从右边计数

一个字符串 - 类名称将被匹配上的th为列

“_all”- 所有的列（即指定一个默认值）

示例代码仓库：https://gitee.com/SteveRocket/practice_fronted/tree/master/frontend_plugs_libs/datatables

更多资料 · 微信公众号搜索【CTO Plus】关注后，获取更多，我们一起学习交流。

关于公众号的描述访问如下链接

关于Articulate“做一个知识和技术的搬运工。做一个终身学习的爱好者。做一个有深度和广度的技术圈。”一直以来都想把专业领域的技https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q

SteveRocket

关注

3
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端开发技术栈（插件篇）：datatables

1、Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。2、分页，即时搜索和排序。3、几乎支持任何数据源：DOM，javascript，Ajax 和服务器处理。4、支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation。5、各式各样的扩展: Editor, TableTools, FixedColumns….6、丰富多样的option和强大的API。7、支持国际化。8、免费开源。
复制链接

扫一扫