jQuery 数据表 - 如何以编程方式按列排序

Question

所以我有一个数据table:

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

稍后在代码中，我观察按钮上的点击事件，以便我可以从 table 中获取一些数据，然后按列排序

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'] ] );

Answer 1

我使用 .order() 而不是 .sort()。示例：

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

其中 0 是列的 ID。

Answer 2

您可以使用 table 的 order 方法轻松做到这一点。您可以采用以下技术。

我们需要在这里做两件事。

获取当前列索引
单击图标时对特定列应用升序或降序操作

这里让我们假设我们有一个按钮或 link 可以 click 绑定。

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

因此，每当我们单击向上箭头图标时，它都会对单击的列进行排序。

jQuery 数据表 - 如何以编程方式按列排序

jQuery Datatables - how to programatically sort by a column

javascript

jquery

datatables

获取列索引

应用升序或降序排序