如何使用 Jquery Datatable 仅对当前页面进行排序

Question

我在很多项目中都使用了 Jquery 数据表，它在所有场景中都能完美运行。

对于我当前的项目，我要求仅对当前页面进行排序，但默认情况下数据表将对整个数据进行排序并重绘整个表格。

我确信会有一些简单的配置来启用此功能，但在他们的论坛中除了这些行之外找不到任何配置

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

// Sort by column 1 and then re-draw
table
    .order( [[ 1, 'asc' ]] )
    .draw( false ); 

我试过了，但似乎没有任何效果。在请分享您的代码之前，任何人已经成功实现了这一点。

Answer 1

在询问如何仅对当前页面进行排序之前，我们应该回答以下问题：

• 我们为什么要做这样的排序？
• 我们应该这样做吗？
• 有什么意义吗？
• 这样的决定有什么影响？

当我们要执行查询并显示我们正在处理的结果列表时：

• 搜索条件
• 排序标准
• 分页

这三个元素密切相关，它们清楚地定义了用户在屏幕上看到的内容。
例如，我们可以有以下描述：

有一个演员列表。它按名称排序并分为页面（每页 50 项）。我们在第三页。

当我们有这样的规则时，那么用户在这个列表中就有很好的定位。他在页面顶部看到迈克尔凯恩，在页面底部看到肖恩康纳利。 当他想找到罗伯特杜瓦尔时，他知道他应该多走几页。 当他想查看这些按年龄排序的演员时，他只需使用列表并返回到第一页。

但是如果我们只为当前页面提供额外的排序呢？这会扰乱上述系统的凝聚力。 如果我们对用户说：

您现在看到的是按年龄排序的演员名单（页）的第三页。

该用户仅使用当前页面可以获得什么？名称以“C”开头的演员的年龄层次结构？ 在页面顶部，将显示该页面中最年长的演员。但是用户不知道它是否是所有列表中最老的演员。 如果不是，那么他应该在哪个页面上寻找旧的？这种诉诸毫无价值，它会覆盖初始排序（它有一些价值）。

这种诉诸也可能导致用户严重混淆。他可以放松对原始排序和页面排序的定位。

结论：

我认为为单页提供排序没有任何意义。我觉得它有害。所以你应该只在你有强有力的论据时才使用它。

Answer 2

更新 1

虽然我同意 rtruszk，但我仍然认为如果 0) 您别无选择或 1) 您的客户不愿意讨论 UX 更改，则应该找到/探索解决方案。

工作示例： http://jsfiddle.net/ebRXw/63/

我能够通过从 DataTable 中过滤掉当前可见的行来完成您的任务。我尽力在 DataTables 中找到一个解决方案，可能存在一个，但最后我使用 jQuery 和哈希表来识别和过滤掉当前可见的行。

我相信这可以进一步优化。希望它能让你朝着正确的方向前进。

$(document).ready(function () {

    var table = $('#example').DataTable({
        "columnDefs": [{
            "targets": [0],
                "visible": false,
                "searchable": true
        }]
    });

    // Show page 0
    table.page(0).draw(false);
    // Sort by column 1 (Name)
    table.order([1, 'asc']).draw(false);

    $("#ReloadTable").click(function () {
        // Clear the current filter
        oTable = $('#example').dataTable();
        oTable.fnFilter('', 0);
        oTable.fnFilter('');

        // Reset all "visible" values in the first cell
        var table = $('#example').DataTable();
        table.rows().indexes().each(function (idx) {
            var d = table.row(idx).data();
            table.row(idx).data()[0] = 0;
            d.counter++;
            table.row(idx).data(d);
        });
    });

    $("#FilterCurrentPage").click(function () {
        // Create a hash of the index of currently visible rows
        var h = new Object();
        var x = $('.odd,.even').filter(function () {
            var idx = $(this)[0]._DT_RowIndex;
            h[idx] = idx;
            return this.style.display == ''
        });

        // update the first value based on the currently visible rows
        var table = $('#example').DataTable();
        table.rows().indexes().each(function (idx) {
            var d = table.row(idx).data();
            if (h.hasOwnProperty(idx)) {
                table.row(idx).data()[0] = 1;
            }
            d.counter++;
            table.row(idx).data(d);
        });

        // filter rows with a value of 1 in the first cell
        oTable = $('#example').dataTable();
        oTable.fnFilter(1, 0);
    });
});

---

更新 0

我还没有找到解决方法，但我确信存在解决方法。下面的代码将选择并返回数据表中当前可见的行。

var x = $('.odd,.even').filter(function () {
    $(this).addClass('selected'); // Select the visible rows
    return this.style.display == '' 
});

---

From the DataTables maintainer:

有没有一种简单的方法可以告诉数据表我只想对当前分页进行排序和重绘？

在 DataTables 1.9 中 - 不，没有 这样做的方式，但在 1.10 中你可以使用 table.order( ... ).draw( 错误的 ）;保留分页。 1.10 pre beta 可以在 git 中使用，如果你 想给它一个狂欢:-)

艾伦

通过datatables: sort only current pagination of table

但是，您也许能够获取当前可见的行，对它们进行排序，然后以某种方式显示它们。下面的代码提供了过滤后的当前可见行。

var table = $('#example').DataTable();
table.$('tr', {"filter":"applied"});

另见：

• jquery DataTables. How to get filtered (visible) rows
• fnGetData of visible rows only
• Retrieving row data after filtering JQuery Datatables

Answer 3

@JSuar 建议的解决方案很好，但我不喜欢它的一件事是，每次要对表格进行排序时都必须单击额外的按钮，并且分页被禁用（对我来说不是很自然）。如果它适合您的用例，那就去吧！ 但是，如果您不想每次都点击那些额外的按钮来重新加载表格，并且如果您想让表格尽可能自然，我们可以执行以下操作。

算法

• 禁用Datatables 内置排序功能。
• 获取当前页面上的行并自行排序。
• 使用已排序的行重新绘制表格。

工作 js 小提琴：https://jsfiddle.net/manikumarperla/rhsz2qnt/39/

最终结果（仅对当前页面排序）

通过使用自己的排序逻辑，您可以完全控制表格，并且可以做任何事情。