前端控件JQuery Datatables使用——常用功能初始化

本文用于自己记录,忘记时可以用来回顾。点击这里进入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,//初始化ColReorder
            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
            }
        });

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

拖动后的效果: 

 


扩展功能之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
            }
        });

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

                           

 


本文将会持续更新。。。。。 

 

 

 

 

 

 

 

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页