基于JQuery可拖动列表格插件DataTables的踩坑记

r囧r小猫 2021-11-09 01:16 351阅读 0赞

**前言**

最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件。

在查找使用方法的过程中发现可用案例并不多，且大多言语不详。本文将全面介绍此插件的使用过程。

如果不是有拖动列调整列位置顺序的需求，建议不要使用此插件，坑点较多。后面有事件我写一个名为Bootstrap-table表格插件的使用方法，使用起来比这个插件强多了

**正文**

英文官网：[https://datatables.net/][https_datatables.net]

中文官网：[http://www.datatables.club/][http_www.datatables.club]

建议多多参考英文官网中reference(参考)[https://datatables.net/reference/index][https_datatables.net_reference_index]和中文官网中的文档[http://www.datatables.club/reference][http_www.datatables.club_reference]

下载文件时尽量不要在中文官网下载，因为下载不到需要的表格的其他插件，英文官网下载地址：[https://datatables.net/download/index][https_datatables.net_download_index]

下载方式就是选择，Bootstrap，JQuery，DataTables，以及下面插件中ColReorder（此插件是拖动列所需的），在此只是提议，如何下载诸君自选

**服务器分页方式**

注意，本文只介绍服务器分页方式，因为客户端分页方式很简单，创建表格时写上必要的参数，然后把数据传入表格就完成了

DataTables是基于JQuery和Bootstrap的，所以在使用此插件前需引入这两个库（框架）所需的文件

引入在其他地方下载后的JQuery和Bootstrap及在DataTables官网下载的文件

html代码如下：

js代码如下：

服务器配置代码：

踩坑:特别注意,这里的交互必须写在表格的ajax配置项里,如果写在其他地方传入数据,则点第二页后的页数时显示的页数总是第二页,且第一页无法点击

表格的相关事件：

踩坑:事件不要与创建表格代码写在一个函数内，否则单次触发事件后触发的次数会随着点击次数的增加，如：第一次触发一次，第二次点击后会自动触发两次

改变分页大小事件：

$('#table').on('length.dt',function(e,settings,len) {
         pageSize = len;//改变存储分页大小的变量，len为改变后的分页大小
    });

换页事件：

$('#table').on( 'page.dt', function () {
           pageNum = $('#table').DataTable().page() + 1;//改变存储当前页数的变量，$('#table').DataTable().page()方法获取到的是从0开始的当前页数
     });

初始化事件：

$('#table').on('init.dt',function(e,settings,len) {
            console.log(e,settings,len)
    });

选中行效果事件:

踩坑1:在添加点击事件时,必须先使用off()移除事件,否则在不刷新页面的前提下再次触发表格重新渲染后会导致点击一次后触发多次事件

踩坑2:这里设置属性checked时使用的是JQuery的prop方法,坑点是必须不能使用attr来设置属性(使用后当点击过复选框之后再设置此属性则无效),因为JQuery在1.6版本后引入了一个prop这个方法，专门用来获取表单属性

$(document).off( 'click', '#role-table tbody tr');
    $(document).on( 'click', '#role-table tbody tr', function () {
              //为每行设置类名，并且操作复选框
              if($(this).hasClass('selected')) {
                $(this).removeClass('selected');
                $(this).find('td>input').prop("checked",false);
              } else {
                if(!$(this).hasClass('estimateRole')) {
                  $(this).addClass('selected');
                  $(this).find('td>input').first().prop("checked",true);
                }
              }
    });
    //点击复选框是不会选中行的，所以还需要为复选框设置事件
    $(document).on( 'change', '#role-table tbody tr td input', function () {
              if($(this).parent().parent().hasClass('selected')) {
                $(this).parent().parent().removeClass('selected');
                $(this).parent().parent().find('td>input').prop("checked",false)
              } else {
                $(this).parent().parent().addClass('selected');
                $(this).parent().parent().find('td>input').first().prop("checked",true)
              }
    });
    $('#table').DataTable().rows('.selected').data();//获取选中的行（带有相应类名的行）

多层表头：

使用多层表头时，配置中的column需要换成columnFefs

columnDefs: [
                {
                  "targets":[0],//第一列
                  "orderable": false,
                  "render": function (data, type, row, meta) {
                    var text = "<input class='single-check-input'  type='checkbox'>";
                    return text;
                  }
                },
                {
                  "targets":["json"],//最后一列
                  "render": function (data, type, row, meta) {
                    console.log(data)
                    var text = "";
                    text = "<a href=# οnclick=showCollisonJsonData(this)>查看详情</a>"
                    return text;
                  }
                },
    ]

配置表头函数：

效果图如下：

![1201341-20190725102931378-827845086.png][]

本文原创，转载请注明出处：[https://www.cnblogs.com/zhangdongya/p/11240565.html][https_www.cnblogs.com_zhangdongya_p_11240565.html]

转载于:https://www.cnblogs.com/zhangdongya/p/11240565.html

[https_datatables.net]: https://datatables.net/
[http_www.datatables.club]: http://www.datatables.club/
[https_datatables.net_reference_index]: https://datatables.net/reference/index
[http_www.datatables.club_reference]: http://www.datatables.club/reference/
[https_datatables.net_download_index]: https://datatables.net/download/index
[1201341-20190725102931378-827845086.png]: /images/20211108/17814d748b0c450b8ea783b3d929059f.png
[https_www.cnblogs.com_zhangdongya_p_11240565.html]: https://www.cnblogs.com/zhangdongya/p/11240565.html