JQuery DataTable 标头未与 ScrollY 和服务器端处理对齐

Posted 2023-03-21

【中文标题】JQuery DataTable 标头未与 ScrollY 和服务器端处理对齐

【英文标题】：JQuery DataTable Headers Not Aligned With ScrollY and ServerSide Processing

【发布时间】：2021-08-14 22:21:56

【问题描述】：

我有一个带有 jquery 数据表的 MVC/Bootstrap 4 站点，该数据表在初始页面加载时显示为空表，然后正在使用服务器端处理来检索 docReady 函数中的数据。一旦 ajax 与数据一起返回，列标题就会稍微偏离。第一列标题似乎正确对齐，但随后的每一列都比前一列稍微偏离。在行的末尾，列标题似乎已经足够显示垂直滚动条，即使它实际上没有显示。

如果我最小化/调整浏览器窗口的大小，它会重绘标题，一切看起来都很完美，然后如果我最大化窗口，它也会重绘标题，看起来很完美。

如何在 ajax 调用后强制重绘以获取数据，以便标题与列对齐。如果返回的数据导致显示垂直滚动条，那么标题就会关闭得更多。但如果我手动调整窗口大小，它会重新绘制并修复问题。

这是我的数据表：

 var dt = $('#data-table').DataTable(
        processing: true,
        serverSide: true,
        dataSrc: 'list',
        dom: 'lBfrtip',
        deferLoading: 0,
        bRetrieve: true,
        iDisplayLength: 50,
        scrollY: "500px",
        scrollCollapse: true,
        autoWidth: true,
        ajax: 
            type: 'POST',
            url: '/Equipment/LoadEquipmentListingGrid', 
            error: function(e) 
                console.log("Response: " + JSON.stringify(e.message));
            
        ,
        order: [[3, "asc"]],
        columns: [
            "data": "EQUIPMENT_ID",
             "data": "DESCRIPTION" ,
             "data": "MANUFACTURER" ,
             "data": "MODEL" ,
             "data": "SERIAL_NUMBER" ,
             "data": "EQUIPMENT_TYPE" ],
        ...

这是表格：

<table id="data-table" class="table table-striped table-bordered mt-5">
    <thead>
        <tr>
            <th>Equipment Id</th>                
            <th>Description</th>
            <th>Manufacturer</th>
            <th>Model</th>
            <th>Serial Number</th>
            <th>Equipment Type</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>  

我尝试通过重绘在 ajax 调用中添加成功属性，但它不起作用，只是再次调用了我不想要/不需要的服务器。只需要根据表格中的新数据以及是否显示垂直滚动条来重绘标题（就像在浏览器调整大小时一样）。

【参考方案1】：

找到了一种无需调用服务器即可重绘表格的方法。我将“完整”属性添加到检索表数据的 ajax 调用中。在那个“完整”函数中，我只是缩小/调整了包含数据表的 DIV 的宽度，并允许标题为表正确调整大小：

 var dt = $('#data-table').DataTable(
        processing: true,
        serverSide: true,
        dataSrc: 'list',
        dom: 'lBfrtip', 
        deferLoading: 0,
        bRetrieve: true,
        iDisplayLength: 50,
        scrollY: "500px",
        scrollCollapse: true,
        ajax: 
            type: 'POST',
            url: '/Equipment/LoadEquipmentListingGrid', //  "/Equipment/Index",
            error: function(e) 
                console.log("Response: " + JSON.stringify(e.message));
            ,
            complete: function() 
                var w = $('#MainEquipDiv').width();
                $('#MainEquipDiv').width(w - 1); // THIS IS THE FIX
                $('#MainEquipDiv').width(w + 1);            
            
        ,
        order: [[3, "asc"]],