jquery 数据表头在某些情况下不扩展或扩展缓慢，例如重新加载

Question

数据表在正文加载后加载标题，对用户可见。第一个身体加载，并在几秒钟内标题正在扩展。在某些情况下，重新加载时页眉不会展开。

这是预加载的数据表。在这里使用延迟加载。

 <div id="dataTableWrapper" style="display:none;">
   <table id="result" width="100%"  class="table  cell-border" cellspacing="0" cellpadding="0" border="0"  >
      <thead>
         <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
         </tr>
      </thead>
      <tbody id="searchResultsDiv">
         <c:forEach items="${list}" var="info" varStatus="tIndex">
            <tr>
               <td >${tIndex.index + 1}</td>
               <td >${info.typeDesc}</td>
               <td >${info.time}-</td>
               <td >${info.id}</td>
               <td >${info.number}</td>
               <td >${info.name}</td>
               <td >${info.description}</td>
               <td  >${info.boDescription}</td>
               <td  >${info.userId}</td>
            </tr>
         </c:forEach>
      </tbody>
   </table>
</div>                                                                            
 

这就是我初始化数据表的方式。

$(document).ready(function() {

    $('#result').DataTable({

        serverSide: true,

        processing: false,

        searching: false,

        lengthChange: false,

        loading: false,

        deferLoading: $("#totalRecordsCount").val(),

        order: [
            [1, "desc"]
        ],

        ajax: {

            type: "POST",

            contentType: "application/x-www-form-urlencoded; charset=windows-1256",

            url: $("#context").val() + "/Controller?actionParam=getResultForPagination",

            data: buildSearchData,

            dataSrc: function(json) {

                return json.data;

            }

        },

        //stateSave:false,

        scrollY: "735px",

        scrollCollapse: true,

        fixedHeader: true,

        paging: true,

        pageLength: $("#pageSize").val(),



        initComplete: function() {

            var api = this.api();

            $('#dataTableWrapper').show();

            api.columns.adjust();

        },

        //single page? do not display pagination

        fnDrawCallback: function(oSettings) {

            if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {

                $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();

                $(oSettings.nTableWrapper).find('.dataTables_info').hide();

            } else {

                $(oSettings.nTableWrapper).find('.dataTables_paginate').show();

                $(oSettings.nTableWrapper).find('.dataTables_info').show();

            }

        },

        //processing :true,

        language: dataTable_lang_values

    });

})

这就是数据表在大多数情况下的显示方式，并且非常完美。

但有时当我们不断重新加载页面时，它会显示为这样。

Answer 1

在表完成设置后调用数据表 draw 和 adjust 函数将修复标题和任何其他未正确对齐的列

$('#result').DataTable({...}); 
$('#result').DataTable().draw(); 
$('#result').DataTable().columns.adjust()

Answer 2

例如，您的表 id = 结果

       $('#result').wrap("<div style='overflow-y: auto; clear:both;'></div>");

（注意：删除数据表中的滚动属性）

Answer 3

我不完全确定，但是当您添加列选项并填写有关每列的一些详细信息时，DataTables 的效果要好得多。这样它就知道传入的数据是什么，以及如何将其与标题行相关联。我遇到了同样的问题，并且能够像这样在我的脚本中修复它：

                columns: [
                    {
                        data: "ID",
                        visible: false,
                    },
                    {
                        data: "ITEM",
                        edit: true,
                        sort: true,
                    },
                    {
                        data: "DESC_1"
                    },
                    {
                        data: "UPC"
                    },
                    {
                        data: "Status",
                    },
                ],

也许添加列变量也会对您有所帮助？

Answer 4

如果列的宽度始终相同，您可以使用简单的老式 html 来解决此问题，添加一个 colgroup 并像这样定义每个列的宽度：

<colgroup><col width="200px"/><col width="150px"/>... </colgroup>

上面一行应该是下一行：

<table id="result" width="100%"...