我使用以下代码来设置DataTable的列宽.在部分页面加载期间,宽度看起来是正确的,当它完全加载时,宽度关闭.
<script>
$(document).ready(function () {
$("#memberGrid").dataTable({
"dom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "../../Content/swf/copy_csv_xls.swf"
},
"destroy": true,
"info": true,
"bLengthChange": false,
"bFilter": false,
"bAutoWidth": false,
"aoColumns": [{ "sWidth": "20%" }, { "sWidth": "20%" }, { "sWidth": "20%" }, { "sWidth": "10%" }, { "sWidth": "20%" }, { "sWidth": "10%" }]
});
});
</script>
Run Code Online (Sandbox Code Playgroud)
表标记
<table class="group-grid table table-hover table-bordered table-responsive zebra-striped" id="memberGrid">
<thead class="tablehead">
<tr>
<th style="width: 20%">Name</th>
<th style="width: 20%">Room with</th>
<th style="width: 20%">Extensions</th>
<th style="width: 10%">Travel Protection</th>
<th style="width: 20%">Flying …Run Code Online (Sandbox Code Playgroud) 我有这个插件经常出现的问题。
启用 scrollX 选项时,标题列未对齐。我尝试了许多在 stackoverflow 上阅读的解决方案,但没有成功。
可能是插件版本的问题吧?
但是,这是我的数据表设置:
var oTable = $('#table').dataTable({
"bJQueryUI": true,
"aaData": jsonList,
"bPaginate": true,
"scrollX": true,
"scrollCollapse" : true,
"bLengthChange" : true,
"bAutoWidth" : true,
"oLanguage" : IT,
"aoColumns": [
{ "mDataProp": "name", "sClass": "alignCenter" },
{ "mDataProp": "surname", "sClass": "alignCenter" },
{ "mDataProp": "age", "sClass": "alignCenter" },
{ "mDataProp": "city", "sClass": "alignCenter" },
{ "mDataProp": "state", "sClass": "alignCenter" },
{ "mDataProp": "work", "sClass": "alignCenter" },
],
"aaSorting": [[1, 'asc']],
"fnDrawCallback": function () {
formatTable();
} …Run Code Online (Sandbox Code Playgroud)