使用 jquery/datatables 排序后如何保留当前页面？答案

【问题标题】：how to keep the current page after sorting with jquery/datatables?使用 jquery/datatables 排序后如何保留当前页面？
【发布时间】：2014-05-12 11:36:30
【问题描述】：

我使用的是 http://www.datatables.net 版本 1.9.4。排序后我想保留当前页面，但默认行为会将我重定向到第一页。有人知道快速解决方案吗？

谢谢

【问题讨论】：

我的解决方案对你有用吗？
很遗憾，不，因为我无法更改 jquery.dataTables.js 文件本身
所以，我需要覆盖外部的现有行为
下面的解决方案是覆盖现有行为。为什么不能更改 dataTables.js 文件？我之前对其提供的样式表进行了更改...
因为对项目的要求。当新版本的 dataTables.js 发布时，我的更改将被删除。

标签： jquery sorting datatables jquery-datatables

【解决方案1】：

有一个状态保存选项。见this link

$(document).ready(function() {
    $('#example').dataTable( {
        stateSave: true
    } );
} );

【讨论】：

【解决方案2】：

使用 "bStateSave": true 代替 Pexsol 提到的 stateSave: true。

【讨论】：

【解决方案3】：

stateSave 选项不会解决这个问题，因为它只处理页面刷新，而不是排序更改。这样的事情就可以解决问题。

var page = 0;

var table = $('#example').DataTable();

table.on('order', function() {
    if (table.page() !== page) {
        table.page(page).draw('page');
    }
});

table.on('page', function() {
    page = table.page();
});

见小提琴here。

【讨论】：

【解决方案4】：

我知道我迟到了，但我最近遇到了同样的问题，也许我的解决方案可能对某人有所帮助。

DataTable 不提供此功能，因为在对所有数据进行排序后，您将被重定向到第一页，因为可见数据并不重要。但由于客户的要求，我不得不只对可见数据进行排序。

首先你需要禁用表格的表头点击事件

var table = $('#example').DataTable();
table.columns().every( function () {
        var cell = $(this.header());
        cell.off( 'click');    
    });

然后在每列要排序的地方添加点击事件，调用自定义sortTable(n)，以列索引为参数。

<th onclick="sortTable(0)">First Name</th>
<th onclick="sortTable(1)">Last Name</th>


function sortTable(n) {
    if (dir == "asc") {
        table.order([[ n , 'asc' ]].draw(false);
        dir = "desc";
    }
    else if (dir == "desc") {
        table.order([[ n , 'desc' ]].draw(false);
        dir = "asc";
    }
}

您还需要全局初始化dir 变量并将其设置为默认方向asc/desc。

【讨论】：