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

zz2j4svz 于 2023-01-12 发布在 jQuery

关注(0)|答案(5)|浏览(137)

数据表在正文加载后加载页眉，用户可以看到。首先加载正文，几秒钟后页眉展开。在某些情况下，重新加载时页眉不展开。
这是预加载的数据表。在此使用延迟加载。

<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

    });

})

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

但有时当我们不断重新加载页面时，它会出现这样的情况。

jquery

来源：https://stackoverflow.com/questions/68916745/jquery-data-table-headers-not-expanding-or-expanding-slow-in-some-scenarios-lik

5条答案

按热度按时间

dphi5xsq1#

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

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

赞(0）回复(0）举报 2023-01-12

voase2hg2#

例如，您的表ID = result

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

(note：删除数据表中的滚动属性）

赞(0）回复(0）举报 2023-01-12

fhg3lkii3#

我不是很确定，但是当你添加columns选项，并填入每一列的一些细节时，DataTables会工作得更好。这样它就知道什么数据是传入的，以及如何将它与标题行相关联。我也遇到过同样的问题，并能够在我的脚本中修复它，如下所示：

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

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

赞(0）回复(0）举报 2023-01-12

nvbavucw4#

如果列的宽度总是相同的，你可以用简单的good-old html来解决这个问题，添加一个colgroup并定义每个列的宽度，如下所示：

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

上面的行应该是下面的行：

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

赞(0）回复(0）举报 2023-01-12

pes8fvy95#

调整后应调用Draw函数：

var api = this.api();
api.columns.adjust().draw();

另一种实现方式是使用datatable对象：

"initComplete": function(settings, json) {
                  setInterval(function() {
                    <datatable object>.columns.adjust().draw();
                  }, 1500);
               }

我只是使用setInterval在1500毫秒后调用列调整绘制，但这不是必需的。

赞(0）回复(0）举报 2023-01-12

我来回答

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

5条答案

相关问题

热门标签

最新问答