jQueryDatatables表头和表格内容不对齐、表头坍塌、js/jQuery处自定义Datatable表格各列表格内容的位置、css设置Datatable表格内容居中

        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 = $(&＃39;#dataTable2&＃39;).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%","bLengthChange": true,"bFilter": false,"bSort": false,"bInfo": true,"bStateSave": false,"sAjaxSource": "/BaseSTKMananger/GetEmployees","fnRowCallback": function (nRow, aData, iDisplayIndex) {//相当于给字段格式化$(&＃39;td:eq(0)&＃39;, nRow).attr(&＃39;style&＃39;, &＃39;text-align:left;&＃39;);$(&＃39;td:eq(1)&＃39;, nRow).attr(&＃39;style&＃39;, &＃39;text-align:center;&＃39;);$(&＃39;td:eq(2)&＃39;, nRow).attr(&＃39;style&＃39;, &＃39;text-align:center;&＃39;);},"aoColumns": [{"mData": "emp_id"},{"mData": "emp_id"},{"mData": "emp_name"},],&＃39;columnDefs&＃39;: [{&＃39;targets&＃39;: 0,&＃39;searchable&＃39;: false,&＃39;orderable&＃39;: false,&＃39;className&＃39;: &＃39;dt-body-center&＃39;,&＃39;render&＃39;: function (data, type, full, meta) {return &＃39;选择&＃39;;}}],"oLanguage": DataTables_Option.Language,"sServerMethod": "POST","fnServerData": function retrieveData(sSource, aoData, fnCallback, oSettings) {var data_char = $(&＃39;#number&＃39;).val();var data_char2 = $(&＃39;#name&＃39;).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;//request.token = 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);}});},});
}