欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-24 12:49:53
一、动态定义列头 在ajax中,用datatable再去重新配置列头,当然传回的数据中,要有对应放列头的键值对 我自定义了Mock数据,用于前端自己交互。 其中,rowdata用于存放传回的数据,col_define用于存放定义的列头,targets表示第几列,title表示列名,data是为了对应 ......

一、动态定义列头

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