Jquery DataTables thay đổi thứ tự thành desc khi nó sắp xếp

Question

Tôi đang sử dụng DataTables để hiển thị một số dữ liệu và nó hoạt động tốt nhưng tôi muốn tùy chỉnh nó một chút và không chắc chắn như thế nào.

Điều tôi muốn làm là khi người dùng nhấp vào tiêu đề cột để sắp xếp cột đó tôi muốn ban đầu đặt hàng giảm dần thay vì tăng dần. Có cách nào để làm điều này không?

Answer 1

Có xem xét này: DataTables sorting direction control example

Bạn có thể làm một cái gì đó như:

$(document).ready(function() { 
    $('#example').dataTable({ 
     "aoColumns": [ 
      { "asSorting": [ "desc", "asc" ] }, //first sort desc, then asc 
     ] 
    }); 
}); 

Answer 2

Cách duy nhất để nhận được những cái trống của bạn cuối cùng sẽ là một chút của một hack (vì loại đang làm việc chính xác).

Thay vì trả lại giá trị trống từ máy chủ của bạn, trở về một cái gì đó như: "[Trống]"

tôi đã không kiểm tra nó, nhưng tôi khá chắc chắn dấu ngoặc vuông sẽ đến sau khi mã chữ và số. Cũng dấu ngoặc vuông truyền thống tượng trưng cho một cái gì đó mà chưa được hoàn thành hoặc xác nhận.

Answer 3

Để đối phó với sắp xếp chỗ trống cuối cùng, đây là những gì tôi đã đưa ra with--
(Tôi chỉ ghét khoảng trống sắp xếp đầu tiên !!)

Bao gồm các tùy chỉnh loại chức năng

// custom sort functions 
jQuery.fn.dataTableExt.oSort['text-blankslast-asc'] = function (x, y) { 
    x = (x == "") ? String.fromCharCode(255) : x; 
    y = (y == "") ? String.fromCharCode(255) : y; 
    return ((x < y) ? -1 : ((x > y) ? 1 : 0)); 
}; 

jQuery.fn.dataTableExt.oSort['text-blankslast-desc'] = function (x, y) { 
    x = (x == "") ? String.fromCharCode(0) : x; 
    y = (y == "") ? String.fromCharCode(0) : y; 
    return ((x < y) ? 1 : ((x > y) ? -1 : 0)); 
}; 

Áp dụng các thẻ sắp xếp cho các cột thích hợp

// init example 
$('#table2').dataTable({ 
    "bJQueryUI": true, 
    "aoColumns": [ 
     null, 
     { "sType": "text-blankslast" }, 
     { "sType": "text-blankslast" }, 
     { "sType": "text-blankslast" }, 
     null 
    ] 
}); 

Answer 4

Nếu bất kỳ ai khác như Dave và tôi đang tìm kiếm một cách để đặt thứ tự sắp xếp trên tất cả các cột, những điều sau đây có thể phù hợp với bạn. Để thay đổi thứ tự sắp xếp trên tất cả các cột, tôi thiết lập một vòng lặp để thay đổi cài đặt sau khi bảng đã khởi tạo:

$(document).ready(function() { 
    var example_table = $('#example').dataTable(); 
    $.each(example_table.dataTableSettings[0].aoColumns, function(key, column) { 
     column.asSorting = [ "desc", "asc" ]; 
    }); 
}); 

Hy vọng điều đó sẽ hữu ích. Thử nghiệm trên jQuery 1.11.0 và DataTables 1.10.0

Answer 5

Phiên bản hiện tại của DataTables (1.10) cung cấp theo cách sau chuyển đổi mặc định thứ tự sắp xếp này với tài sản orderSequence dưới columnDefs (hoặc columns nhưng ít linh hoạt).

Đây là tài liệu trên orderSequence.

"columnDefs": [ 
    { "orderSequence": [ "desc", "asc"], "targets": [ 1 ] }, 
] 

Vì nó cũng đề cập, bạn có thể buộc một cột để chỉ loại khi nhấp như DESC hay ASC mà giao diện của bạn rất tốt có thể được hưởng lợi từ. Trong trường hợp của tôi, tôi cần phải có các cột giảm dần sắp xếp khi nhấp chuột ban đầu cho số cột không xác định, vì vậy tôi đã quyết định chuyển ví dụ để nhắm mục tiêu tên của một tiêu đề cột class thay vì xác định rõ ràng từng cột là "targets":[1],"targets":[2],...[n] hoặc tòa nhà có lập trình một loạt các chỉ mục của các cột mà tôi quan tâm.

Bạn có thể nhắm mục tiêu các cột theo nhiều cách according to here.

Kết quả cuối cùng là một định nghĩa bảng như sau:

<table><thead><tr> 
    <th class='descendFirst'>DESCend when first clicked</th> 
    <th>a normally sorted ASC->DESC->... column</th> 
    ... 
</tr></thead></table> 

Và Data Table trao quyền như vậy:

$("#table").dataTable({ 
    "columnDefs": [ 
     {"orderSequence": ["desc","asc"], "targets":"descendFirst" }, 
    ] 
}); 

Voila! Trước tiên, hãy nhấp vào sắp xếp giảm dần trên tất cả các cột có một số <th> được đánh dấu bằng một lớp 'descendFirst' (một tên lớp mô tả được chọn tùy ý).

Answer 6

này làm việc cho tôi:

 settings = { 
      aoColumnDefs: [ 
      { 
       orderSequence: ["desc", "asc"], 
       aTargets: ['_all'] 
      } 
     ]}; 

     $('.dataTable').DataTable(settings);