服务端处理模式下Datatable如何支持客户端排序功能

核心问题原因 #

你开启了serverSide: true服务端处理模式，该模式下所有分页、排序、搜索逻辑均由后端实现，前端Datatable仅负责渲染数据。你当前的代码中自定义ajax请求完全没有传递Datatable生成的排序参数给后端，后端也没有做对应的排序逻辑处理，因此点击列头排序不生效。

具体解决步骤 #

• 第一步：提取Datatable自带的排序、分页参数
  在Datatable传入的ajax自定义函数的第一个参数data中，已经封装了所有排序相关信息：data.order数组存储当前排序列的索引、排序方向（asc/升序，desc/降序），data.columns存储所有列的配置信息，data.start、data.length为官方计算好的分页起始位置、每页条数，无需自行计算。
  示例提取代码：

ajax: function (data, callback, settings) {
    GetMainParentWindow(window).showLoading();

    var recycleBinUrl = document.getElementById("RecycleBinURL").value;
    var isAdmin = getQuerystringByURL(recycleBinUrl, "admin");
    if (isAdmin == '') isAdmin = false;

    // 直接用Datatable提供的分页参数，无需自行计算
    const pageSize = data.length;
    const startIndex = data.start;

    // 提取排序参数
    let sortField = '';
    let sortDirection = '';
    if (data.order && data.order.length > 0) {
        const sortColumnIndex = data.order[0].column;
        sortDirection = data.order[0].dir;
        // 要求你的columns配置中每个列需要指定data属性，对应后端返回的字段名
        sortField = data.columns[sortColumnIndex].data;
    }

    // 把排序参数拼到请求中
    var url = AppSettings.RecycleBinUrl + "FillGrid?startIndex=" + startIndex +
        "&pageSize=" + pageSize + "&sortField=" + encodeURIComponent(sortField) + "&sortDirection=" + sortDirection;

    $.ajax({
        // 其余ajax配置不变
        dataType: "json",
        type: "POST",
        url: url,
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ isAdmin: isAdmin }),
        processData: false,
        cache: false,
        headers: {
            "Authorization": 'Bearer ' + loggedInUser.Token
        }
    }).done(function (result) {
        callback({
            recordsFiltered: result.recordsFiltered,
            recordsTotal: result.recordsTotal,
            data: result.data
        });
    }).fail(function () {
        GetMainParentWindow(window).alertMessage(resources_Warning, resources_Error, resources_Ok);
    }).always(function () {
        GetMainParentWindow(window).hideLoading();
    });
},

• 第二步：后端Java接口改造
  给你的FillGrid接口新增sortField、sortDirection两个请求参数，在查询数据库时，根据传入的字段名和排序方向，动态拼接排序SQL或者使用ORM框架的动态排序API查询，返回已经完成排序的分页数据即可。
• 第三步：检查列配置
  确认你的columns变量配置中，所有需要排序的列都设置了data属性，属性值和后端返回的实体类字段名保持一致，否则会出现排序列匹配错误的问题。

额外优化建议 #

你当前代码中自行计算分页起始位置的逻辑可以完全删除，直接使用Datatable提供的data.start参数即可，避免切换页码、修改每页条数时出现分页数据错误的问题。

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