一、动态定义列头
在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
});
