jQueryDatatables表头和表格内容不对齐、表头坍塌、
jsjQuery处⾃定义D。。。
Datatables是⼀款基于jQuery的表格插件，在⽇常使⽤中我们多多少少会遇到⼀些疑难杂症的问题，例如表头和表体对不齐，表头坍塌，设置表格内容居中，⾃定义表体的内容居中样式等等。
1.表头不对齐、表头坍塌：
这种情况⼤多会发⽣在此种情形下：DataTable外层某些地⽅设置了宽度限制，⽐如我这⾥，我的table此时是在⼀个弹窗内部的，⽽弹窗我是⾃定义窗体的宽度的。这时可能导致了DataTable渲染时候会出类似于图中的问题，我在⽹上也查看了很多解决⽅法，⼤多不完整或者不满⾜此时的修改需求，花了很长时间到了以下这个完整的解决⽅法：
1）css中设置DataTable的这两个属性：
.dataTables_scrollHeadInner {
width: 100% !important;
}
.dataTables_scrollHeadInner > table {
width: 100% !important;
}
2）html中在此时⽤到的DataTable上添加此样式控制：
2.设置DataTable表体的表格内容居中等(全部变化)
此种情况⽐较简单和⽅便的设置就是直接使⽤css设置DataTable的样式即可：
.dataTable{
text-align: center;
}
3.⾃定义表体各列内容的居中样式(⾃定义设置)
有时候我们需要将⼀些操作列的内容单独设置居中样式，那此时只能在js中间⾃定义设置某列的内容样式，如下图，蓝⾊部分就是每⼀列，红⾊就在给每⼀个这是居中样式。
代码如下：
function initDataTableForUsr() {
var dataTable;
dataTable = $('#dataTable2').dataTable({
"sPaginationType": "full_numbers",
"destroy": true,
"bPaginate": true,
"iDisplayLength": 10,
"aLengthMenu": [10, 25, 50, 100, 500],
"bAutoWidth": false,
"bProcessing": true,
"bServerSide": true,
"bScrollCollapse": true,
"sScrollX": "100%",
jquery的attr属性
"bLengthChange": true,
"bFilter": false,
"bSort": false,
"bInfo": true,
"bStateSave": false,
"sAjaxSource": "/BaseSTKMananger/GetEmployees",
"fnRowCallback": function (nRow, aData, iDisplayIndex) {//相当于给字段格式化
$('td:eq(0)', nRow).attr('style', 'text-align:left;');
$('td:eq(1)', nRow).attr('style', 'text-align:center;');
$('td:eq(2)', nRow).attr('style', 'text-align:center;');
},
"aoColumns": [
{"mData": "emp_id"},
{"mData": "emp_id"},
{"mData": "emp_name"},
],
'columnDefs': [{
'targets': 0,
'searchable': false,
'orderable': false,
'className': 'dt-body-center',
'render': function (data, type, full, meta) {
return '<a href="#" onclick="checkID(\'' + full['emp_id'] + '\',\'' + full['emp_name']+ '\')">选择<//a>';            }
}],
"oLanguage": DataTables_Option.Language,
"oLanguage": DataTables_Option.Language,
"sServerMethod": "POST",
"fnServerData": function retrieveData(sSource, aoData, fnCallback, oSettings) {            var data_char = $('#number').val();
var data_char2 = $('#name').val();
pushJQueryDataTableaoData(aoData, "data_char", data_char);
pushJQueryDataTableaoData(aoData, "data_char2", data_char2);
pushJQueryDataTableaoData(aoData, "sys_id", SYS_ID);
pushJQueryDataTableaoData(aoData, "token", getToken());
var request = converToJQueryDataTableRequest(aoData);
//var request = {};
//request.sEcho = aoDataObj.sEcho;
//request.iDisplayLength = aoDataObj.iDisplayLength;
//request.iDisplayStart = aoDataObj.iDisplayStart;
//request.sys_id = SYS_ID;
//ken = getToken();
//showLoading();
$.ajax({
"type": oSettings.sServerMethod,
"contentType": "application/json",
"url": sSource,
"dataType": "json",
"data": JSON.stringify(request),
"success": function (response) {
if (response.sError) {
swal(response.sError);
return;
}
fnCallback(response);
}
});
},
});
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。