datatables-cn
datatables-cn copied to clipboard
设置fixedColumns,在fixedColumns或fixedColumns前的列配置了排序,则footer出现表格线错位
1. 使用DataTables的源(CDN地址、本地源文件)
https://datatables.net/download/#bs-3.3.7/dt-1.10.20/fc-3.3.0
2. DataTables的版本
Included libraries:
- Bootstrap 3 3.3.7, DataTables 1.10.20, FixedColumns 3.3.0
3. 开发语言、框架(Java/NodeJs/PHP、Vue/Ng2/React/JQuery)
JQuery
4. 使用DataTables的配置信息
// 此处填写格式化代码
initTableColumns: function () {
var regDateCol = {
"data": "regDate",
"title": "注册时间",
"width": "90px",
"render": function (data, type, row, meta) {
if (row.regDate == null) {
return "-";
}
return row.regDate;
}
};
var sdkChannelNameCol = {
"data": "sdkChannelName",
"title": "sdk渠道",
"width": "180px",
"render": function (data, type, row, meta) {
if (row.sdkChannelName == null) {
return "-";
}
return row.sdkChannelName;
},
"orderable": false
};
var childGameNameCol = {
"data": "childGameName",
"title": "买量游戏名称",
"width": "250px",
"render": function (data, type, row, meta) {
if (row.childGameName == null) {
return "-";
}
return row.childGameName;
},
"orderable": false
};
var advChannelCol = {
"data": "advChannel",
"title": "广告渠道",
"width": "100px",
"render": function (data, type, row, meta) {
if (row.advChannel == null) {
return "-";
}
return row.advChannel;
},
"orderable": false
};
var advSubChannelCol = {
"data": "advSubChannel",
"title": "广告子渠道",
"width": "100px",
"render": function (data, type, row, meta) {
if (row.advSubChannel == null) {
return "-";
}
return row.advSubChannel;
},
"orderable": false
};
var addRegDeviceAmountCol = {
"data": "addRegDeviceAmount",
"width": "110px",
"title": "新增注册设备数",
"render": function (data, type, row, meta) {
if (row.addRegDeviceAmount == null) {
return "-";
}
return row.addRegDeviceAmount;
},
"orderSequence": ["desc", "asc"]
};
// this.tableColumns是一个数组
this.tableColumns.push(regDateCol, sdkChannelNameCol, childGameNameCol, advChannelCol, advSubChannelCol, addRegDeviceAmountCol);
for (var i = 1; i <= 90; i++) {
var ltvCol = {
"data": "ltv",
"title": i + "留",
"width": "110px",
"render": function (data, type, row, meta) {
if (typeof (row.ltvInfo) == 'undefined' || row.ltvInfo == null) {
return "-";
}
var ltvLevel = meta.col - 5;
var regex = new RegExp(',' + ltvLevel + '\\|(\\d*)');
try {
var retainAmount = row.ltvInfo.match(regex)[1];
var rate = Number((retainAmount / row.addRegDeviceAmount) * 100).toFixed(2);
return retainAmount + " | " + rate;
} catch (err) {
return "-";
}
},
"orderable": false
};
this.tableColumns.push(ltvCol);
}
},
init: function (paramObj) {
this.tableEle = $("#table").DataTable({
"destroy": true,
"serverSide": true,
"autoWidth": false,
"ordering": true,
"order": [[5, "desc"]],
"stateSave": false,
"searching": false,
"scrollX": true,
"scrollY": "500px",
"scrollCollapse": true,
"fixedHeader": true,
"oLanguage": { //国际化配置
"sProcessing": "正在获取数据,请稍后...",
"sLengthMenu": "显示 _MENU_ 条",
"sZeroRecords": "没有您要搜索的内容",
"sInfo": "从 _START_ 到 _END_ 条记录 总显示记录数为 _TOTAL_ 条",
"sInfoEmpty": "记录数为0",
"sInfoFiltered": "(共显示 _MAX_ 条数据)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"oPaginate": {
"sFirst": "第一页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "最后一页"
}
},
"fixedColumns": {
"leftColumns": 6
},
"ajax": {
"url": ctxPath + '/user-login/retain-ltv/table',
"type": 'POST',
"data": {
startDate: paramObj.startDate,
endDate: paramObj.endDate,
channelNo: paramObj.channelNo,
appId: paramObj.appId,
childGameIdsStr: JSON.stringify(paramObj.childGameIds),
advChannel: paramObj.advChannel,
advSubChannelsStr: JSON.stringify(paramObj.advSubChannels),
creator: paramObj.creator,
dimension: paramObj.dimension,
advReleaseFilter: paramObj.advReleaseFilter
}
},
"columns": this.tableColumns
});
/**
* 表格重绘完成后取消遮罩层
*/
this.tableEle.on("draw", function () {
$("body").mLoading("hide");
});
}
5. 错误信息或截图
6. 其他你认为可以帮助解决问题的信息
貌似是排序的图标把表头和内容的宽度撑开了,但是footer的列宽还是取没有被撑开前的宽度
这插件的问题太多了,建议不要用