基于JQuery可拖动列表格插件DataTables的踩坑记前⾔最近项⽬中在使⽤能够拖动列调整列位置顺序的表格插件---DataTables,这也是⽬前我找到的唯⼀⼀种存在有这种功能的插件。
在查找使⽤⽅法的过程中发现可⽤案例并不多，且⼤多⾔语不详。
本⽂将全⾯介绍此插件的使⽤过程。
如果不是有拖动列调整列位置顺序的需求，建议不要使⽤此插件，坑点较多。
后⾯有时间我会写⼀个名为，使⽤起来⽐这个插件强多了正⽂下载⽅式就是选择，Bootstrap，JQuery，DataTables，以及下⾯插件中ColReorder（此插件是拖动列所需的），在此只是提议，如何下载诸君⾃选服务器分页⽅式注意，本⽂只介绍服务器分页⽅式，因为客户端分页⽅式很简单，创建表格时写上必要的参数，然后把数据传⼊表格就完成了DataTables是基于JQuery和Bootstrap的，所以在使⽤此插件前需引⼊这两个库（框架）所需的⽂件引⼊在其他地⽅下载后的JQuery和Bootstrap及在DataTables官⽹下载的⽂件html代码如下：<table class="table table-striped display table-bordered" style="margin: 0;" cellspacing="0" width="100%" id="table"></table>js代码如下：服务器配置代码：踩坑:特别注意,这⾥的交互必须写在表格的ajax配置项⾥,如果写在其他地⽅传⼊数据,则点第⼆页后的页数时显⽰的页数总是第⼆页,且第⼀页⽆法点击let judgeTable = 0;function table() {if(_this.judgeTable) {//这⾥是为了在初始化时表格不销毁，否则会报错$('#table').DataTable().destroy();//销毁表格}_this.judgeTable = 1;$('#table').DataTable({colReorder: true,//启动列拖动scrollX: true,//左右滚动条ordering: false,//排序searching: false,//参与搜索lengthMenu: [10, 25, 50, 100],//设置分页⼤⼩选择项⽬pageLength: _this.pageSize,//设置分页⼤⼩displayStart: _this.pageNum - 1,//设置当前表格在第⼏页,从0开始serverSide: true,//是否开启服务器分页order: [[1, 'asc']],//asc按升序,desc按降序ajax: function (data, callback, settings) {//data参数中,data.length是单页记录条数;data.start是开始的记录序号;(data.start / data.length)+1是当前页码$.ajax({url: _this.$ajaxConfig.url + "role/page?pageNum=" + _this.pageNum + "&pageSize=" + _this.pageSize,type: "GET",contentType: "application/json",cache: false,xhrFields: {withCredentials: true},success: function (result) {if(result.code == 0) {let dataTable = [];//修改⾏数据字段数据,以使表格识别,其中result是你要放到表格中的数据，如果你获取到数据的字段和你在设置配置columns中的⼀致，则省略这个步骤result.data.list.forEach(function (item,index) {dataTable.push({id: item.id,name: ,remark: item.remark,enableEdit: item.enableEdit})})//修改设置数据字段,以使表格识别var returnData = {recordsTotal: result.data.total,recordsFiltered: result.data.total,data: dataTable};callback(returnData);}},error: function (error) {console.log(error);}});},columns: [//列设置{data: null,checkboxes: {//这⾥是复选框selectRow: true}},{title: "⽤户名",data: "userName",},{title: "描述信息",data: "remark"},{title: "编辑⽤户状态",data: null,render: function (data, type, row, meta) {//render内设置此列单元格内容，我这⾥是设置了按钮//row是json对象⾏数据，放到元素中时需转为json字符串let rowData = JSON.stringify(row);let className = '';let elementText = '';if(row.flag) {className = 'csbtn-yes';elementText = '启⽤';} else {className = 'csbtn-no';elementText = '禁⽤';}//这⾥特别需要注意的是传输数据rowData不能使⽤双引号包含，要么使⽤单引号，要么不使⽤引号return "<span class='csbtn " + className + "' data-table=" + rowData + " >" + elementText + "</span>";}}],"language": {"lengthMenu": "每页显⽰ _MENU_ 条数据","emptyTable": "暂⽆数据","info": "显⽰ _START_ 到 _END_ 共 _TOTAL_ 条","infoEmpty": "显⽰ 0 到 0 共 0 条","infoFiltered": "(从 _MAX_ 条中过滤)","thousands": ",","loadingRecords": "加载...","processing": "加载中...","search": "搜索:","zeroRecords": "未找到相关数据","select": {"rows" : ""},"paginate": {"first": "第⼀页","last": "最后⼀页","next": "下⼀页","previous": "上⼀页"}},});}表格的相关事件：踩坑:事件不要与创建表格代码写在⼀个函数内，否则单次触发事件后触发的次数会随着点击次数的增加，如：第⼀次触发⼀次，第⼆次点击后会⾃动触发两次改变分页⼤⼩事件：$('#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需要换成columnFefscolumnDefs: [{"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=# onclick=showCollisonJsonData(this)>查看详情</a>"return text;}},]配置表头函数：function configComplexHeader(headerInfo) {let _this = this;var theader = $('#detail-table-header');var headrFirstRow = $('<tr></tr>');var childHeaders = [];headerInfo.forEach(function (singleHeader) {var headerName = ;var colspanNum = singleHeader.childList.length;var thE = $('<th></th>',{colspan: colspanNum,text: headerName,style: "text-align:center"});headrFirstRow.append(thE);(singleHeader.childList).forEach(function (childObj) {var childHeadTitle = ;if (childHeadTitle === "json_data") {childHeadTitle = "操作";}childHeaders.push(childHeadTitle);});});var tmpThE = $('<th/>',{colspan: 1,});headrFirstRow.prepend(tmpThE);var headerSecondRow = $('<tr></tr>');childHeaders.forEach(function (childHeader) {var className = "normal";if (childHeader === "操作") {className = "json";}headerSecondRow.append($('<th/>',{text:childHeader,class: className}));});var tmpSecThE = $('<th></th>',{class: "check-all-input-th",html: "<input type='checkbox' class='check-all-input'>"});headerSecondRow.prepend(tmpSecThE);theader.append(headrFirstRow);theader.append(headerSecondRow);}//表头数据var headerInfo = [{"name":"碰撞字段","childList":[{"field":"col_c_cardno_3_0","name":"⾝份证号/⾝份证号"}]},{"name":"⽕车票数据","childList":[{"field":"c_mobile_1_0","name":"电话"},{"field":"c_email_2_0","name":"E-mail地址"},{"field":"a_name_1_0","name":"姓名"},{"field":"a_time_2_0","name":"订票时间"},{"field":"a_time_3_0","name":"出发时间"}, {"name":"户政⼈⼝","childList":[{"field":"a_name_1_1","name":"姓名"},{"field":"a_sex_2_1","name":"性别"},{"field":"a_address_3_1","name":"地址"},{"field":"a_marriage_4_1","name":"婚姻状况"},{"field":"a_edu_level_5_1","name":"⽂化程度"} configComplexHeader(headerInfo);效果图如下：。
