ASP.NET MVC中jQuery DataTables排序时保留当前页码问题

嘿，这个问题我之前帮不少开发者踩过坑——服务器端模式（serverSide: true）下的DataTable默认逻辑是全量数据集排序后再分页，所以你点击排序时，它会把排序参数传给后台，后台重新对整个数据集排序后返回第一页数据，这就是为啥你在第3页排序会直接跳回首页的原因。stateSave: true只是保存表格的状态（比如当前页、排序字段），但架不住服务器端模式下每次排序都会触发新的后台请求，所以根本解决不了当前页排序的需求。

要实现仅对当前页数据排序，核心思路是：拦截排序触发的后台请求，把排序逻辑放到客户端完成，只对已加载的当前页数据做排序，而不是让后台重新处理全量数据。下面给你具体的实现方案：

具体实现步骤 #

1. 修改DataTable配置，添加排序拦截逻辑 #

我们可以用preDrawCallback钩子在表格绘制前判断是否是排序操作，如果是，就中止后台请求，手动对当前页数据排序后重新渲染：

var table = $('#yourTableId').DataTable({
    serverSide: true,
    ajax: {
        url: '/YourController/GetTableData', // 你的后台接口地址
        type: 'POST'
    },
    columns: [
        { data: 'Id', orderable: true },
        { data: 'UserName', orderable: true },
        { data: 'CreateTime', orderable: true },
        // 其他列配置...
    ],
    stateSave: true,
    preDrawCallback: function(settings) {
        // 判断是否是排序触发的表格重绘，且当前是服务器端模式
        if (settings.bSorted && settings.bServerSide) {
            // 中止默认的后台请求
            if (settings.jqXHR) {
                settings.jqXHR.abort();
            }
            
            // 1. 获取当前页的所有数据
            var currentPageData = table.rows({ page: 'current' }).data();
            // 2. 获取当前排序的列索引和方向（asc/desc）
            var sortColIndex = settings.aaSorting[0][0];
            var sortDirection = settings.aaSorting[0][1];
            // 3. 获取排序列的数据源字段名（对应columns里的data属性）
            var sortField = table.columns(sortColIndex).dataSrc();

            // 4. 对当前页数据进行排序
            currentPageData.sort(function(a, b) {
                var valA = a[sortField];
                var valB = b[sortField];
                
                // 根据数据类型处理排序逻辑，这里覆盖数字、字符串、日期三种常见类型
                if (!isNaN(Date.parse(valA)) && !isNaN(Date.parse(valB))) {
                    // 日期类型排序
                    var dateA = new Date(valA);
                    var dateB = new Date(valB);
                    return sortDirection === 'asc' ? dateA - dateB : dateB - dateA;
                } else if (!isNaN(valA) && !isNaN(valB)) {
                    // 数字类型排序
                    return sortDirection === 'asc' ? valA - valB : valB - valA;
                } else {
                    // 字符串类型排序（支持中文）
                    return sortDirection === 'asc' 
                        ? valA.localeCompare(valB, 'zh-CN') 
                        : valB.localeCompare(valA, 'zh-CN');
                }
            });

            // 5. 清空当前表格，添加排序后的数据，重新渲染（draw(false)不会触发后台请求）
            table.clear().rows.add(currentPageData).draw(false);
            
            // 返回false阻止默认的服务器端重绘逻辑
            return false;
        }
        return true;
    }
});

2. 关键细节说明 #

• 拦截后台请求：通过settings.jqXHR.abort()中止默认的排序请求，避免后台返回全量排序后的第一页数据。
• 数据类型适配：针对日期、数字、字符串做了不同的排序逻辑，你可以根据自己的业务数据类型调整这部分代码。
• 本地重绘：draw(false)参数表示只在客户端重绘表格，不会触发新的后台请求，这样就能保持当前页的分页状态。

3. 额外注意事项 #

• 如果某些列不需要排序，直接在columns配置里设置orderable: false，避免触发拦截逻辑。
• 这种方式只对已加载的当前页数据有效，其他页的数据还在后台，所以切换分页后，新页面的排序还是会按默认逻辑触发后台请求（如果需要新页面也保持当前页排序，那就得把每页数据都缓存到客户端，但这会失去服务器端模式的优势，只适合小数据量场景）。

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