如何使用 Jquery 数据表仅对当前页面进行排序 [英] How to Sort only the current page using Jquery Datatable

问题描述

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

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

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

var table = $('#example').DataTable();//按第 1 列排序，然后重新绘制桌子.order( [[ 1, 'asc' ]] ).draw(假);

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

解决方案

更新 1

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

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

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

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

$(document).ready(function () {var table = $('#example').DataTable({列定义":[{目标":[0]，可见":假，可搜索":真实}]});//显示第 0 页table.page(0).draw(false);//按第 1 列(名称)排序table.order([1, 'asc']).draw(false);$("#ReloadTable").click(function () {//清除当前过滤器oTable = $('#example').dataTable();oTable.fnFilter('', 0);oTable.fnFilter('');//重置第一个单元格中的所有可见"值var table = $('#example').DataTable();table.rows().indexes().each(function (idx) {var d = table.row(idx).data();table.row(idx).data()[0] = 0;d.计数器++；table.row(idx).data(d);});});$("#FilterCurrentPage").click(function () {//创建当前可见行索引的散列var h = new Object();var x = $('.odd,.even').filter(function () {var idx = $(this)[0]._DT_RowIndex;h[idx] = idx;返回 this.style.display == ''});//根据当前可见的行更新第一个值var table = $('#example').DataTable();table.rows().indexes().each(function (idx) {var d = table.row(idx).data();如果(h.hasOwnProperty(idx)){table.row(idx).data()[0] = 1;}d.计数器++；table.row(idx).data(d);});//过滤第一个单元格中值为 1 的行oTable = $('#example').dataTable();oTable.fnFilter(1, 0);});});

<小时>

更新 0

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

var x = $('.odd,.even').filter(function () {$(this).addClass('selected');//选择可见行返回 this.style.display == ''});

<小时>

来自 DataTables 维护者:

<块引用><块引用>

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

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

艾伦

通过数据表:仅对表格的当前分页进行排序

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

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

另见:

• jquery 数据表.如何获得过滤(可见)行
• 仅可见行的fnGetData
• 过滤 JQuery 数据表后检索行数据

I have been using Jquery datatable for many projects and it's working perfectly for all scenarios.

For my current project I require sorting to be happened only for current page but by default datatable will sort whole data and redraw the entire table.

I was sure there will be some simple configuration for enable this feature but couldn't find any except these lines from their forum

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

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

I tried this but it doesn't seems to make any effect. any one has implemented this successfully before please share your code.

解决方案

Update 1

Although I agree with rtruszk, I still think a solution should be found/explored if 0) you have no choice or 1) your client is not willing to discuss UX changes.

Working Example: http://jsfiddle.net/ebRXw/63/

I was able to accomplish what you were after by filtering out the currently visible rows from the DataTable. I tried my best to find a solution within DataTables, and one may exist, but in the end I used jQuery and a hash table to identify and filter out the currently visible rows.

I'm sure this can be optimized further. Hopefully, it gets you moving in the right direction.

$(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);
    });
});

---

Update 0

I still haven't found a workaround, but I'm convinced one exists. The code below will select and return the current visible rows in your datatable.

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

---

From the DataTables maintainer:

Is there an easy way to tell datatables that I want to sort and redraw only current pagination?

In DataTables 1.9- no, there isn't a way of doing that, but in 1.10 you can use table.order( ... ).draw( false ); to preserve paging. 1.10 pre beta is available in git if you want to give it a bash :-)

Allan

via datatables: sort only current pagination of table

However, you might be able to get the current visible rows, sort them, and display them somehow. The below code provides the current visible rows after filtering.

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

See also:

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

这篇关于如何使用 Jquery 数据表仅对当前页面进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！