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

问题描述 投票：5回答：3

我一直在许多项目中使用Jquery数据表，并且在所有情况下都可以正常使用。

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

我确定启用该功能将进行一些简单的配置，但在他们的论坛中找不到这些行，但找不到这些行

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

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

我尝试过此操作，但似乎没有效果。任何人都已经成功实现了此目的，然后再分享您的代码。

jquery sorting jquery-plugins jquery-datatables
3个回答
5
投票

更新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（假）;保留分页。如果您可以在git中使用1.10 pre beta想给它一个bash：-）

艾伦

通过datatables: sort only current pagination of table

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

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

另请参见：

8
投票

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

  • 我们为什么要进行这种分类？
  • 我们应该这样做吗？
  • 有什么意义吗？
  • 此决定的含义是什么？

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

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

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

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

[当我们有这样的规则时，则用户在此列表中具有良好的定向。他在页面顶部看到Michael Caine，在底部看到Shon Connery。当他想找到罗伯特·杜瓦尔时，他知道他应该再走几页。当他想看到这些演员按年龄排序时，他只是索取列表并返回首页。

但是，如果我们仅对当前页面提供其他排序，该怎么办？这会扰乱上述系统的凝聚力。如果我们对用户说：

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

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

这种手段也可能导致用户严重困惑。他可以放宽对原始排序和页面排序的了解。

结论：

我认为对单页进行排序没有任何意义。我觉得这很有害。因此，仅当您有很强的论据时才应使用它。

0
投票

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

算法

最终结果

（仅对当前页面进行排序）

Datatable with a feature to sort only the current page

使用您自己的排序逻辑，您可以完全控制表，并且可以对表进行任何实际操作。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.