Question

我一直在为许多项目使用Jquery数据表，它适用于所有场景。

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

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

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

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

我试过了，但似乎没有任何效果。任何人都已成功实施此功能，请分享您的代码。

Answer 1

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

我们为什么要进行这样的排序？
我们应该这样做吗？
有任何意义吗？
这种决定的含义是什么？

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

搜索条件
排序标准
分页

这三个元素密切相关，它们清楚地定义了用户在屏幕上看到的内容我们可以举例说明：

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

当我们有这样的规则时，用户在此列表中具有良好的方向。他认为Michael Caine位于顶部，而Shon Connery位于页面底部。当他想找到罗伯特杜瓦尔时，他知道他应该进一步走几页。当他想看到按年龄排序的这些演员时，他只需对列表进行调整并返回第一页。

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

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

这个用户只能通过当前页面获得什么？名称以“C”开头的演员的年龄层次结构？在页面顶部将有来自此页面的最老的演员。但是用户不知道它是否是所有列表中最老的演员。如果没有，那么他应该在哪个页面寻找旧的？这种求助是毫无价值的，它会覆盖初始排序（具有一定的价值）。

这种求助也会导致用户严重混淆。他可以放弃他对原始排序和页面排序的定位。

<强>结论：

我认为为单页提供排序没有任何意义。我发现它有害。因此，只有在你有强有力的论据时才应该使用它。

Answer 2

更新1

虽然我同意rtruszk，但我仍然认为如果你没有选择或1）你的客户不愿意讨论用户体验的变化，应该找到/探索解决方案。

工作示例： 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中找到，如果你   想给它一个bash： - ）

阿伦

通过datatables: sort only current pagination of table

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

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

另见：

Answer 3

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

算法

禁用Datatables内置排序功能。
获取当前页面上的行并自行对它们进行排序。
重绘带有已排序行的表。

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

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

通过使用自己的排序逻辑，您可以完全控制表，并且可以执行任何操作。

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

3 个答案:

更新1

更新0