本文用于自己记录，忘记时可以用来回顾。点击这里进入JQuerydatatable官网API地址

JQuery Datatables初始化

个人比较喜欢JQueryDatatables的Bootstrap4风格，所以文章以Bootstrap4风格为例。

JQueryDatatable的初始化很简单，按照官网的举例说明，只要如下几个JS和CSS文件即可：

1、jquery-3.3.1.min.js，当然高版本的JS也是可以的

2、jquery.dataTables.min.js

3、dataTables.bootstrap4.min.js

4、bootstrap.min.css

5、dataTables.bootstrap4.min.css

注意：JS文件的引用顺序很重要，JQuery必须放在第一位，然后dataTables.min.js是第二位，JQuery不能重复引用

既然使用了bootstrap.min.css，那我加入了bootstrap.min.js了，就用Bootstrap框架。忽略文件路径，代码如下图所示：

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/datatables/jquery.dataTables.min.js"></script>
<script src="~/Scripts/datatables/dataTables.bootstrap4.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Scripts/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>

再加入官网复制来的HTML代码(因为太长，所以这里只列举了一部分)，如下图所示：

<table id="example" class="table table-striped table-bordered" style="white-space: nowrap;width:100%;cursor:pointer" cellspacing="0"><thead><tr><th></th><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Salary</th></tr></thead><tbody><tr><td></td><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td><td>$320,800</td></tr>.............</tbody></table>

再加入一段基本的JS代码，如下图所示：

<script type="text/javascript">var dtsLanguage = "/Scripts/datatables/datatables_zh-cn.txt"var mytable;$(document).ready(function () {mytable = $('#example').DataTable({pagingType: "full_numbers",language: {url: dtsLanguage}});mytable.on('order.dt search.dt', function () {mytable.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {cell.innerHTML = i + 1;});}).draw();});
</script>

变量dtsLanguage存放了一个配置文件地址，配置文件用于更换默认英文的语言配置为中文配置，配置文件的内容如下：

{"buttons": {"pageLength": "显示 %d 行","excel":"<i class='fa fa-file-excel-o'></i>&nbsp;导出Excel"},"decimal": "","emptyTable": "表中数据为空","info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项","infoEmpty": "显示第 0 至 0 项结果，共 0 项","infoFiltered": "(由 _MAX_ 项结果过滤)","InfoPostFix": "","thousands": ",","lengthMenu": "显示 _MENU_ 项结果","loadingRecords": "载入中...","processing": "处理中...","search": "搜索:","zeroRecords": "没有匹配结果","oPaginate": {"sFirst": "首页","sPrevious": "上一页","sNext": "下一页","sLast": "尾页"},"Aria": {"sSortAscending": ": 以升序排列此列","sSortDescending": ": 以降序排列此列"}
}

pagingType属性是分页类型，用“full_numbers”就可以了，显示首页，尾页，上一页，下一页，当前页，默认用这个就可以了。

以下这段JS代码的目的是显示行号，非必须。具体说明参考官方说明：datatables行号实现

        mytable.on('order.dt search.dt', function () {mytable.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {cell.innerHTML = i + 1;});}).draw();

完成上述代码后，就可以看到初步样子了，如下图所示：

扩展功能之Buttons

JQuery datatables自带一些常用的功能按钮，比如导出EXCEL等。也支持自定义按钮。具体API参考官网Button相关介绍

默认的按钮样式在datatable初始化的JS和CSS基础上再加两个JS和CSS文件即可：

1、dataTables.buttons.min.js

2、buttons.dataTables.min.css

注意：datatable.buttons.min.js必须放在第一位。

因为要跟初始化一样的风格，所以在再引用Bootstrap4风格的JS和CSS文件：

3、buttons.bootstrap4.min.js

4、buttons.bootstrap4.min.css

忽略文件引用路径，代码如下图所示：

@*基础buttons相关*@
<script src="~/Scripts/buttons/dataTables.buttons.min.js"></script>
<script src="~/Scripts/buttons/buttons.bootstrap4.min.js"></script>
<link href="~/Scripts/buttons/buttons.bootstrap4.min.css" rel="stylesheet" />
<link href="~/Scripts/buttons/buttons.dataTables.min.css" rel="stylesheet" />

可见列

支持手动选择表格中哪些列是显示的，哪些列是不可显示的。

引用的JS文件如下图所示：

5、buttons.colVis.min.js

打印

支持用浏览器端直接打印页面功能。

引用的JS文件如下图所示：

6、buttons.print.min.js

复制

支持复制表格中的数据功能。

引用JS文件如下图所示：

7、buttons.html5.min.js

导出PDF

支持导出PDF功能。

引用JS文件如下图所示：

8、pdfmake.min.js

9、vfs_fonts.js

导出EXCEL功能

支持导出Excel功能。

引用JS文件如下图所示：

10、jszip.min.js

自定义按钮

支持自定义功能按钮。引入基础Buttons的JS和CSS即可。

所有JS引用如下图所示：

@*基础buttons相关*@
<script src="~/Scripts/buttons/dataTables.buttons.min.js"></script>
<script src="~/Scripts/buttons/buttons.bootstrap4.min.js"></script>
<link href="~/Scripts/buttons/buttons.bootstrap4.min.css" rel="stylesheet" />
<link href="~/Scripts/buttons/buttons.dataTables.min.css" rel="stylesheet" />@*复制相关*@
<script src="~/Scripts/buttons/buttons.html5.min.js"></script>
@*excel导出相关*@
<script src="~/Scripts/buttons/jszip.min.js"></script>
@*打印相关*@
<script src="~/Scripts/buttons/buttons.print.min.js"></script>
@*可见列相关*@
<script src="~/Scripts/buttons/buttons.colVis.min.js"></script>
@*导出PDF相关*@
<script src="~/Scripts/buttons/pdfmake.min.js"></script>
<script src="~/Scripts/buttons/vfs_fonts.js"></script>

将datables相关的JS代码修改下，如下图所示：

        mytable = $('#example').DataTable({dom: 'Bfrtip',lengthChange: false,pagingType: "full_numbers",buttons: ['pageLength','colvis','copy','print','pdf','excel',{text: "自定义按钮一",className: "btn",action: function (e, table, node, config) {}},],language: {url: dtsLanguage}});

此时再次运行程序如下图所示：

扩展功能之Select

到目前为止表格中任意行是不能被选中点亮的。也无法触发任何点击事件。扩展功能Select提供对这个操作的支持。具体API参考官网Select介绍

默认选中样式只要引用两个JS和CSS文件就可以了：

1、dataTables.select.min.js

2、select.dataTables.min.css

因为要用Booststrap4风格，就必须再引用一个CSS文件：

3、select.bootstrap4.min.css

忽略文件引用路径，如下图所示：

@*select相关*@
<script src="~/Scripts/select/dataTables.select.min.js"></script>
<link href="~/Scripts/select/select.dataTables.min.css" rel="stylesheet" />
<link href="~/Scripts/select/select.bootstrap4.min.css" rel="stylesheet" />

select的初始化很简单，只需要加一句代码就可以了：select：true。修改datatable相关的JS代码如下图所示：

        mytable = $('#example').DataTable({dom: 'Bfrtip',select:true,pagingType: "full_numbers",buttons: ['pageLength','colvis','copy','print','pdf','excel',{text: "自定义按钮一",className: "btn",action: function (e, table, node, config) {}},],language: {url: dtsLanguage}});

这时运行程序，效果如下图所示：

如需要多行选择，修改代码如下图所示：

            select: {style: 'multi'},

运行效果如下图所示：

如果需要在把第一列变成选择框，可以修改代码如下图所示：

        mytable = $('#example').DataTable({dom: 'Bfrtip',columnDefs: [{orderable: false,className: 'select-checkbox',targets: 0}],select: {style: 'multi',selector: 'td:first-child'},pagingType: "full_numbers",buttons: ['pageLength','colvis','copy','print','pdf','excel',{text: "自定义按钮一",className: "btn",action: function (e, table, node, config) {}},],language: {url: dtsLanguage}});

使用效果如下图所示：

配置select的中文提示：在配置文件中修改关于select的提示，此时配置文件中的内容如下图所示：

再次运行可以看到，已经变成中文提示：

表格全选和全部取消

select提供跟button先关的全选和全部取消功能，修改datatable相关的JS代码如下：

mytable = $('#example').DataTable({dom: 'Bfrtip',columnDefs: [{orderable: false,className: 'select-checkbox',targets: 0}],select: {style: 'multi',selector: 'td:first-child'},pagingType: "full_numbers",buttons: ['pageLength','colvis','copy','print','pdf','excel',{text: "自定义按钮一",className: "btn",action: function (e, table, node, config) {}},'selectAll',//全选'selectNone',//全部取消],language: {url: dtsLanguage}});

运行效果如下图所示：

扩展功能之ColReorder

datatables可以手动对列进行移动排序。具体API请查看官网对ColReorder的介绍

Bootstrap风格的ColReorder样式只需要引用两个JS和CSS文件就可以了：

1、dataTables.colReorder.min.js

2、colReorder.bootstrap4.min.css

忽略文件引用路径，如下图所示：

@*ColReorder相关*@
<script src="~/Scripts/ColReorder/dataTables.colReorder.min.js"></script>
<link href="~/Scripts/ColReorder/colReorder.bootstrap4.min.css" rel="stylesheet" />

ColReorder的初始化也很简单，只要加一句代码就可以了：colReorder: true 。

修改datatables相关的JS代码如下图所示：

mytable = $('#example').DataTable({dom: 'Bfrtip',colReorder: true,//初始化ColReordercolumnDefs: [{orderable: false,className: 'select-checkbox',targets: 0}],select: {style: 'multi',selector: 'td:first-child'},pagingType: "full_numbers",buttons: ['pageLength','colvis','copy','print','pdf','excel',{text: "自定义按钮一",className: "btn",action: function (e, table, node, config) {}},'selectAll','selectNone',],language: {url: dtsLanguage}});

此刻便可以用鼠标点击拖动任何一列到任何位置：

拖动后的效果：

扩展功能之FixedColumns

datatables提供对固定列的支持。具体API参考官网对fixedcolumns详细说明

Bootstrap风格的FixedColumns只需要引用两个JS和CSS文件即可：

1、dataTables.fixedColumns.min.js

2、fixedColumns.bootstrap4.min.css

忽略文件路径，如下图所示：

@*fixdeCol*@
<script src="~/Scripts/fixedcol/dataTables.fixedColumns.min.js"></script>
<link href="~/Scripts/fixedcol/fixedColumns.bootstrap4.min.css" rel="stylesheet" />

FixedColumns的初始化也是很多简单的，只需要一句代码即可，fixedColumns: true

修改datatable的JS代码如下，这里为了显示固定效果将datatable的长和宽缩小了，并去掉了Select相关功能，从目前的结果来看，select 和 fixedColumns有一定程度上的不兼容。

        mytable = $('#example').DataTable({dom: 'Bfrtip',colReorder: true,scrollY: "300px",scrollX: true,scrollCollapse: true,fixedColumns: true,pagingType: "full_numbers",buttons: ['pageLength','colvis','copy','print','pdf','excel',{text: "自定义按钮一",className: "btn",action: function (e, table, node, config) {}},'selectAll','selectNone',],language: {url: dtsLanguage}});

运行效果如下图所示,，可以看到第一列已经固定了：