JQuery DataTables изменить порядок на desc при сортировке

Я использую DataTables для отображения некоторых данных, и он отлично работает, но я хочу настроить его немного и не уверен, как.

то, что я хочу сделать, это когда пользователь нажимает на заголовок столбца, чтобы отсортировать этот столбец, я хочу, чтобы он изначально заказывал нисходящий, а не восходящий. Есть ли способ сделать это?

6
datatables jquery sorting

6 ответов

взгляните на это: DataTables пример управления направлением сортировки

вы можете сделать что-то вроде:

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

текущая версия DataTables (1.10) предоставляет следующий способ переключения этого порядка сортировки по умолчанию со свойством orderSequence под columnDefs (или columns но менее гибкий).

вот документация по orderSequence.

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

как он также упоминает, вы можете заставить столбец только сортировка при нажатии как DESC или ASC, который ваш интерфейс может очень хорошо извлечь выгоду из.

в моем случае, мне нужно было столбцы по убыванию их сортировки при начальном щелчке для неопределенного количества столбцов, поэтому я решил переключить пример на целевой заголовок столбца class имя, а не явное определение каждого столбца как "targets":[1],"targets":[2],...[n] или программно строить массив индексов столбцов, о которых я заботился.

вы можете настроить столбцы несколькими способами по данным здесь.

конечным результатом является определение таблицы вот так:

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

И Таблица Данных уполномоченный как таковой:

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

вуаля! Сначала щелкните по убыванию Сортировать по всем столбцам с <th> отмечен классом "descendFirst" (произвольно выбранное, описательное имя класса).

4

в ответ на сортировку заготовок последний, вот что я придумал--
(Я просто ненавижу сортировку заготовок!!)

включить эти пользовательские функции сортировки

// 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));  
};

применить теги сортировки к соответствующим столбцам

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

Если кто-то еще, как Дэйв и я, ищет способ установить порядок сортировки по всем столбцам, следующее может сработать для вас. Чтобы изменить порядок сортировки по всем столбцам, я настроил цикл для изменения настроек после создания экземпляра таблицы:

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

надеюсь, что это поможет. Протестировано на jQuery 1.11.0 и DataTables 1.10.0

2

единственный способ получить ваши пустые Последние будет немного взломать (так как сортировка работает правильно).

вместо того, чтобы возвращать пустые значения с вашего сервера, верните что-то вроде: "[Blank]"

Я не тестировал его, но я уверен, что квадратные скобки будут после буквенно-цифровых кодов. Также квадратные скобки традиционно символизируют то, что еще не было завершено или подтверждено.

0

это работает для меня:

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

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