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

Posted 2023-05-07

【中文标题】如何使用 Jquery Datatable 仅对当前页面进行排序

【英文标题】：How to Sort only the current page using Jquery Datatable

【发布时间】：2015-02-10 19:55:21

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

好吧，我猜没有这样的事情，但您可以指定要在哪一列上对哪一页进行排序 onload table.page(10).draw( false );table.order( [ 3, 'desc' ] ).draw( false );

【参考方案1】：

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

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

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

搜索条件 排序标准 分页

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

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

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

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

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

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

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

结论：

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

【讨论】：

嗨 rtuszk，我明白了你的意思，这绝对是有道理的。但是有时候，当我们为客户做迁移项目时，客户所需要的只是精确复制他们现有的功能，我们别无选择；）赞成很好的解释。

我很好奇是否有任何强有力的论据来提供这样的功能。我很乐意阅读它们。

我想要类似的功能，直到我读到你的帖子@rtruszk

【参考方案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

【讨论】：

谢谢 JSuar，让我试试这个然后回来！

@ssilas777，我用一个可行的解决方案更新了我的答案。如果您发现任何问题，请告诉我。

这真的很棒，感谢您在这方面的努力，正如您所说，到目前为止我也无法在数据表中找到解决方案，所以我接受这个作为答案。跨度>

【参考方案3】：

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

算法

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

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

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

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

【讨论】：

这看起来很棒！