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
});