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