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

问题描述

对于我当前的项目，我需要排序才能发生在当前页面，但是，我已经使用Jquery datatable来进行许多项目，默认情况下，datatable将对整个数据进行排序并重绘整个表。

我确定会有一些简单的配置来启用此功能，但找不到除这些行从他们的论坛

  var table = $（'＃example'）DataTable（）; 
 
 //按列1排序，然后重新绘制
表
 .order（[[1，'asc']]）
 .draw（false） ; 
  

我尝试过这个，但似乎没有任何效果。任何一个已经成功实施了，请分享你的代码。

解决方案

更新1

虽然我同意rtruszk，但我仍然认为，如果0）你没有选择或者1）您的客户不愿意讨论UX更改，应该找到/探索。

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

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

<我确定这可以进一步优化。希望它可以让你朝着正确的方向移动。

  $（document）.ready（function（）{
 
 var table = $（'＃example'）。DataTable（{
columnDefs：[{
targets：[0]，
visible 
可搜索：true 
}] 
}）; 
 
 //显示页面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.counter ++; 
 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 ; 
 return this.style.display ==''
}）; 
 
 //根据当前可见行更新第一个值
 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）; 
}）; 
 
 //第一个单元格中的值为1的过滤器行
 oTable = $（' #example'）。dataTable（）; 
 oTable.fnFilter（1，0）; 
}）; 
}）; 
  

---

更新0

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

  var x = $（'。odd，.even '）.filter（function（）{
 $（this）.addClass（'selected'）; //选择可见行
 return this.style.display ==''
} ）; 
  

---

从DataTables维护者：

有没有一个简单的方法来告诉我要排序和重新绘制当前分页的数据表？

$ b $在数据表1.9中，没有，没有一个
的方法，但是在1.10中可以使用table.order（...）.draw（
false）;保留分页。如果你要
想给它一个bash，那么1.10 pre beta是可用的： - ）

Allan

通过数据表：仅排序当前分页的表

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

  var table = $（'＃example'）。 
表$（'tr'，{filter：applied}）; 
  

另见：

• jquery DataTables。如何获取过滤（可见）行


• fnGetData只有可见行


• 过滤JQuery Datatables后检索行数据

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 Datatable仅排序当前页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！