时间戳

首页 > 解决方案 > JQuery DataTable 标头未与 ScrollY 和服务器端处理对齐

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

问题描述

我有一个带有 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 调用中添加成功属性，但它不起作用，只是再次调用了我不想要/不需要的服务器。只需要根据表中的新数据以及是否显示垂直滚动条来重绘标题（就像在浏览器调整大小时一样）。

标签： jqueryasp.net-mvcbootstrap-4datatables

解决方案

找到了一种无需调用服务器即可重绘表格的方法。我将“完整”属性添加到检索表数据的 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"]],

推荐阅读