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

Posted 2023-05-09

技术标签:

【中文标题】jquery 数据表头在某些情况下不扩展或扩展缓慢，例如重新加载【英文标题】：jquery data table headers not expanding or expanding slow in some scenarios, like reloading 【发布时间】：2021-10-25 05:30:07 【问题描述】：

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

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

 <div id="dataTableWrapper" style="display:none;">
   <table id="result"   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

    );

)

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

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

【问题讨论】：

一个minimal reproducible example 会很完美 【参考方案1】：

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

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

【讨论】：

对这个解决方案没有帮助。 @user630209 这就是我个人的做法 :) 尝试在小提琴中重现您的问题，我很乐意看看【参考方案2】：

例如，您的表 id = 结果

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

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

【讨论】：

需要滚动通过添加此代码会自动滚动 ($('#result').wrap("" );)【参考方案3】：

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

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

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

【讨论】：

【参考方案4】：

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