簡體   English   中英

jQuery Datatables - 如何按列進行編程排序

[英]jQuery Datatables - how to programatically sort by a column

所以我有一個數據表:

$(tables[i]).DataTable({
    paging: false,
    searching: false,
    info: false,
    ordering: true,
    autoWidth: false,
    columns: [ ... column stuff here ... 
        {name: "Name"},
        {name: "Account"},
        {name: "Number"}
    ]
});

稍后在代碼中,我會在按鈕上查看單擊事件,以便我可以從表中獲取一些數據,然后按列進行排序

var columnName = $('.mySelectBox').val();
var columnNumber = 0;

if(columnName === "Account")
    columnNumber = 1;

var table = $(tables[i]).DataTable();

我想現在按此按鈕單擊第0列或第1列排序。 但不是任何其他專欄。

//this doesn't work for me
table.sort( [ [columnNumber, 'desc'] ] );

我使用.order()而不是.sort() 例:

$('#dataTables-example').DataTable().order([0, 'desc']).draw();

其中0是列的id。

您可以使用表格的順序方法輕松完成此操作。 您可以采用以下技術。

我們需要在這里做兩件事。

  • 獲取當前列索引
  • 單擊圖標,在特定列上應用升序或降序操作

這里讓我們假設我們有一個按鈕或鏈接點擊綁定。

$(".arrow-sort-ascending").bind("click", {
 // Sorting should happen here
}

獲取列索引

我使用通用方法獲取列名。 如果您使用的是Jquery,我們可以使用此方法獲取列索引。

myColumn = $(parent).prevAll().length

其中parent應該是特定列的th

應用升序或降序排序

 // ascending
 myTable.order([myColumn, "asc"]).draw()

因此,如果我們將代碼放在一個部分中,它看起來就像這樣。

table = myTable // This is datatable you initialized

$(".arrow-sort-ascending").bind("click", {table: table}, function(event){
    parent = $(event.target).parent()
    myIndex = $(parent).prevAll().length;
    table.order([myIndex, "asc"]).draw()
}

因此,每當我們單擊向上箭頭圖標時,它會對單擊的列進行排序。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM