基于JQuery的可拖动列表格插件TadaTables

<table class="table table-striped display table-bordered" style="margin: 0;" cellspacing="0" width="100%" id="table"></table>

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,//是否开启服务器分页
    select: {
      style: ‘multi‘
    },
    order: [[1, ‘asc‘]],//asc按升序,desc按降序
    ajax: function (data, callback, settings) {
      //data参数中,data.length是单页记录条数;data.start是开始的记录序号;(data.start / data.length)+1是当前页码
        let dataTable = [];
            //修改行数据字段数据,以使表格识别,其中result是你要放到表格中的数据，如果你获取到数据的字段和你在设置配置columns中的一致，则省略这个步骤
            result.forEach(function (item,index) {
              dataTable.push({
                roleId: item.roleId,
                userName: item.username,
                remark: item.remark,
                flag: item.status
              })
            })
            //修改设置数据字段,以使表格识别
            let returnData = {
              recordsTotal: result.data.total,//result.data.total为总数据量
              recordsFiltered: result.data.total,
              data: dataTable
            };
            callback(returnData);
    },
    columns: [//列设置
      {
        data: null,
        checkboxes: {//这里是复选框
          selectRow: true
        }
      },
      {
        title: "用户名",
        data: "userName",
      },
      {
        title: "角色",
        data: "roleName"
      },
      {
        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();//重新加载表格
});

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

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

$(document).on( ‘click‘, ‘#role-table tbody tr‘, function () {
          //为每行设置类名，并且操作复选框
          if($(this).hasClass(‘selected‘)) {
            $(this).removeClass(‘selected‘);
            $(this).find(‘td>input‘).attr("checked",false)
          } else {
            if(!$(this).hasClass(‘estimateRole‘)) {
              $(this).addClass(‘selected‘);
              $(this).find(‘td>input‘).first().attr("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‘).attr("checked",false)
          } else {
            $(this).parent().parent().addClass(‘selected‘);
            $(this).parent().parent().find(‘td>input‘).first().attr("checked",true)
          }
});
$(‘#table‘).DataTable().rows(‘.selected‘).data();//获取选中的行（带有相应类名的行）

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=# 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 = singleHeader.name;
          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 = childObj.name;
            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":"出发时间"},{"field":"json_data_0","name":"json_data"}]},
          {"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":"文化程度"},{"field":"a_company_6_1","name":"单位"},{"field":"a_address_7_1","name":"籍贯"},{"field":"a_nation_8_1","name":"民族"},{"field":"json_data_1","name":"json_data"}]}]

configComplexHeader(headerInfo);