jQuery DataTable调用JsonResult后滚动时列脚与数据列对齐异常

问题根源 #

• 启用scrollY垂直滚动后，DataTable会将表头、表脚渲染到独立固定容器，列宽未同步导致偏移；
• 控制器返回双重序列化JSON，前端二次解析引发数据结构异常；
• footerCallback存在赋值错误，第二列合计误用第一列结果；
• 初始tbody占位行干扰列宽计算逻辑。

修复步骤 #

1. 修正控制器JSON返回逻辑 #

控制器无需手动序列化对象，避免双重序列化问题：

public JsonResult SalesData(myModel model)
{
    DateTime fromDate = new DateTime();
    DateTime toDate = new DateTime();
    if (!string.IsNullOrEmpty(model.FromDate) && !string.IsNullOrEmpty(model.ToDate))
    {
        fromDate = DateTime.ParseExact(model.FromDate, "dd/MM/yyyy", CultureInfo.InvariantCulture);
        toDate = DateTime.ParseExact(model.ToDate, "dd/MM/yyyy", CultureInfo.InvariantCulture);
    }
    model.CustomerCode = "001";
    var data = _unitOfWork.GetSummary(model.CustomerCode, fromDate, toDate);
    return Json(data, JsonRequestBehavior.AllowGet);
}

同时前端移除dataSrc的二次解析：

"ajax": {
    "url": "/mySales/SalesData",
    "data": report
},

2. 同步表头与表脚列宽 #

启用fixedHeader插件（需引入对应CSS/JS）自动同步列宽：

var table = $('#myTable').DataTable({
    // 其他配置不变
    scrollY: "500px",
    scrollX: true,
    scrollCollapse: true,
    fixedHeader: {
        header: true,
        footer: true
    },
    // 其他配置不变
});

若不想新增插件，初始化后手动同步：

setTimeout(function() {
    $('#myTable thead th').each(function(index) {
        $('#myTable tfoot td').eq(index).width($(this).width());
    });
}, 100);

3. 修复footerCallback赋值错误 #

将第二列合计值改为正确的计算结果：

footerCallback: function (row, data, start, end, display) {
    var api = this.api();
    var intVal = function (i) {
        return typeof i === 'string' ?
            i.replace(/[\$,]/g, '') * 1 :
            typeof i === 'number' ?
                i : 0;
    };

    var col1 = api.column(1).data().reduce(function (a, b) {
        return intVal(a) + intVal(b);
    }, 0);

    var col2 = api.column(2).data().reduce(function (a, b) {
        return intVal(a) + intVal(b);
    }, 0);

    $(api.column(1).footer()).html(col1);
    $(api.column(2).footer()).html(col2);
},

4. 移除tbody占位行 #

清空初始占位行，由DataTable自动填充AJAX数据：

<tbody id="body">
</tbody>

5. 统一列宽配置 #

调整列宽比例，避免挤压导致偏移：

"columnDefs": [
    { "className": "dt-center", "targets": "_all" },
    { "width": "80%", "targets": 0 },
    { "width": "10%", "targets": 1 },
    { "width": "10%", "targets": 2 },
],

内容的提问来源于stack exchange，提问作者Alevel