datatable的部分问题处理(动态定义列头，给某行添加事件，初始显示空数据)

一、动态定义列头

在ajax中，用datatable再去重新配置列头，当然传回的数据中，要有对应放列头的键值对

我自定义了Mock数据，用于前端自己交互。

其中，rowdata用于存放传回的数据，col_define用于存放定义的列头，targets表示第几列,title表示列名，data是为了对应data下的rowdata数据

$.mockjax({
    url: "/salary_import",
    status: 200,
    responseText: {
        'code': 'ok',
        'Msg': '小垃圾',
        'data': {
            'rowdata': [
                {
                    '名字': '呆头鹅',
                    '身份证': 123456789451,
                    'exist': 0,
                    '基本工资': 1000,
                    '职位工资': 100,
                    '绩效工资': 10,
                    '应扣工资': 2000
                }, {
                    '名字': '小学鸡',
                    '身份证': 12123214124,
                    'exist': 0,
                    '基本工资': 2000,
                    '职位工资': 300,
                    '绩效工资': 30,
                    '应扣工资': 3000
                }, {
                    '名字': '奔比',
                    '身份证': 123456789451,
                    'exist': 0,
                    '基本工资': 1000,
                    '职位工资': 100,
                    '绩效工资': 10,
                    '应扣工资': 2000
                }],
            'col_define': [{
                'targets': 0,
                'data': '名字',
                'title': '名字'
            }, {
                'targets': 1,
                'data': '身份证',
                'title': '身份证'
            }, {
                'targets': 2,
                'data': '基本工资',
                'title': '基本工资'
            }, {
                'targets': 3,
                'data': '职位工资',
                'title': '职位工资'
            },{
                'targets': 4,
                'data': '绩效工资',
                'title': '绩效工资'
            },{
                'targets': 5,
                'data': '应扣工资',
                'title': '应扣工资'
            }]
        }
    }
});

那么你ajax交互的时候，就可以

var opts = [];$.ajax({
        url: '/salary_import',
        type: 'POST',
        async: false,
        cache: false,
        dataType: 'json',
        beforeSend: function () {
        },
        success: function (res) {
            if ('ok' === res['code']) {
                alert('解析完成!');
                console.log('返回数据 是', res['data']);
                opts.data = res['data']['rowdata'];
                // opts.data = res.data.rowdata;
                console.log(opts.data);
                opts.columns = res['data']['col_define'];
                var excel = $('#salary_excel_table').DataTable({
                    'language': lan,
                    "dom": 'lB<"top"f><"toolbar">rt<"bottom"ip><"clear">',
                    "paging": true,
                    "lengthChange": true,
                    "info": true,
                    'destroy': true,
                    "deferRender": true,
                    'columns': opts.columns,
                    'data': opts.data,
                });

不知道是否是插件之间兼容性问题，反正，如果我直接先在外面初始化了datatable,给opts先赋了初始配置值，然后再在ajax下，通过改变对应变量再赋值回datatable下的配置文件，即

  var excel = $('#salary_excel_table').DataTable(opts);会莫得什么卵用，因为我百度上都是这样教的，可能单单是我的问题吧，只能重新写份自定义配置，会保险很多，这里就是动态定义列头了，通过后台给的数据，直接描绘前端的列头二、给某行添加事件

var person=$('#person_table').Datatable(..........);//里面的配置自己去配置你们想要后台给你们的data，格式就不教了$("#person_table").on("click","tr",function(){
  var table_data =person.row(this).data();
  console.log(table_data);
  var department=table_data.department;
  var id=table_data.id;
  var name=table_data.name;
  $.ajax({
      url:'/point',
      type:'POST',
      data:{
          department:department,
          id:id,
          name:name
      },
      cache: false,
      async: true,
      success: function (result) {
          console.log(result);
          var m = $('#money_table').DataTable();
          reloadData(m, result['data']['data_money']);
      },
      error: function () {
          alert('德玛西亚')
      }
  })

});

function reloadData(table, dataList) {    var currentPage = table.page();    table.clear();    table.rows.add(dataList);    table.page(currentPage).draw(false);};

点击Datatable下某行，就能够获取到该行数据，放好id,姓名和部门，然后用ajax将这三个数据发给后台，让后台返回给你需要的数据，去渲染另一个datatable（这里你随便怎样都可以，也可以做跳转啥的），重要的是前后端那些数据格式要对好，不然都会出现列数据对不到的错误，还有就是这个reloadData很重要！

三、初始显示空数据

这个就更简单了，你一开始配置表格的时候嘛，可以不写ajax，但是写好列行数据格式，反正没人传给你的会，就是空，等你点击什么或者导入什么的时候，success了再ajax到对应的表的行数据就行了

（所以看清楚，一开始再DataTable里没有AJAX数据获得的话，就是没有行数据的，会显示没有数据，但是列头还是存在的，所以下面没有ajax）

var money_table = $('#money_table').DataTable({
    'language': lan,
    "dom": 'lB<"top"f><"toolbar">rt<"bottom"ip><"clear">',
    "paging": true,
    "lengthChange": true,
    "info": true,
    "order": [
        [0, "desc"]
    ],
    "columnDefs": [
        {
            "title": "应发",
            "targets": 0
        },
        {
            "title": "应扣",
            "targets": 1
        },
        {
            "title": "实发",
            "targets": 2
        },
        {
            "title": "个税",
            "targets": 3
        },
        {
            "title": "年月",
            "targets": 4
        },
        {
            "title": "功能",
            "targets": 5 ,
            "render": function (data, type, full, meta) {
                if (data) {
                    return express_html
                } else {
                    return ''
                }
            }
        }
    ],
    'columns':[
        {'data':'yf'},
        {'data':'yk'},
        {'data':'sf'},
        {'data':'gs'},
        {'data':'yy-mm'},
        {'data':null}
    ],
    'destroy':true,
    "deferRender": true
});

 

文章来源: https://www.cnblogs.com/qq946487854/p/10190281.html