2015-03-24 2 views
1

У меня есть DataTable JQuery с датой и временем столбцами:jQuery Datatables: Сортировка по одному столбцу при нажатии на другой.

Date  Time  Note 
1/2/2015 10:02:03 Test 
1/4/2915 02:12:32 Test 
1/3/2015 02:05:03 Test 
3/2/2015 11:02:03 Test 
1/4/2015 01:02:13 Test 

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

Date  Time  Note 
1/2/2015 10:02:03 Test 
1/3/2015 02:05:03 Test 
1/4/2015 01:02:13 Test 
1/4/2915 02:12:32 Test 
3/2/2015 11:02:03 Test 

У меня есть следующий код:

//jQuery datatable code 
{ mData: 'date', sTitle: 'Date', sClass: "dtDate" }, 
{ mData: 'time', sTitle: 'Time', sClass: "dtTime", sType: "time-date-sort"}, 
{ mData: 'notes', sTitle: 'Notes' }, 
// More code... 

jQuery.fn.dataTableExt.oSort['time-date-sort-asc'] = function(startTime, endTime) {  
    //Date and time sorts go here 
    return sortedVal; 
}; 

jQuery.fn.dataTableExt.oSort['time-date-sort-desc'] = function (startTime, endTime) { 
    //Date and time sorts go here 
    return sortedVal; 
}; 

Я могу сортировать по времени использования, но как бы Я сначала сортирую по дате? Я пытаюсь выяснить, как получить ссылку на значение даты в строке таблицы (связанное со значением времени в этой строке). Например, как я беру объект даты 1/2/2015 для строки, где время 10:02:03? Он не выглядит так, как будто я могу добавить пользовательские параметры в функцию oSort. Использую ли я jQuery.fn.dataTableExt.oSort или jQuery.fn.dataTableExt.afnSortData - лучший вариант для этого?

ответ

1

Для получения значений из других столбцов, которые будут включены в ваш заказ, вы должны создать пользовательские данные источник сортировочный плагин. Ниже будет возвращать значения из столбца 0 и 1 в виде строки даты + времени, т.е. 1/2/2015 10:02:03:

$.fn.dataTable.ext.order['order-time-date-sort'] = function(settings, col) { 
    return this.api().row({order:'index'}).nodes().map(function (tr, i) { 
     return $('td:eq(0)', tr).text()+' '+$('td:eq(1)', tr).text(); 
    });  
} 

Затем установите выше order-date-time-sort в orderDateType для столбца времени:

var table = $('#example').DataTable({ 
    columnDefs : [ 
     { type: 'time-date-sort', 
      orderDataType: "order-time-date-sort", 
      targets: [1] 
     } 
    ]          
}); 

Теперь время могут быть отсортированы в отношении даты тоже, используя простую Date.parse():

jQuery.fn.dataTableExt.oSort['time-date-sort-pre'] = function(value) {  
    return Date.parse(value); 
}; 
jQuery.fn.dataTableExt.oSort['time-date-sort-asc'] = function(a,b) {  
    return a-b; 
}; 
jQuery.fn.dataTableExt.oSort['time-date-sort-desc'] = function(a,b) { 
    return b-a; 
}; 

демо ->http://jsfiddle.net/4toLj9yn/


Примечание: Если у вас есть проблемы с производительностью, он может с случилось огромным столом, вы должны «кэш» результат order-time-date-sort (просто сохранить результат в переменной). Вы также можете рассмотреть возможность использования совершенно другого подхода - orthogonal data.

Смежные вопросы