Как отсортировать по дате с помощью плагинов DataTables jquery? - PullRequest
Новая
       27

Как отсортировать по дате с помощью плагинов DataTables jquery?

45 голосов
/ 19 мая 2010

Я использую плагин datatables jquery и хочу отсортировать по датам.

Я знаю, что у них есть плагин, но я не могу найти, где его можно скачать с

http://datatables.net/plug-ins/sorting

Мне кажется, мне нужен этот файл: dataTables.numericComma.js, но я нигде не могу его найти, и когда я загружаю таблицы данных, его, похоже, нет в zip-файле.

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

Я пытаюсь отсортировать этот формат: ММ / ДД / ГГГГ ЧЧ: ММ TT (AM | PM)

Спасибо

Редактировать

Как изменить это значение для сортировки по ММ / ДД / ГГГГ ЧЧ: ММ TT (AM | PM) и изменить его на дату в США? 

jQuery.fn.dataTableExt.oSort['uk_date-asc']  = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
};

Ответы [ 10 ]

125 голосов
/ 18 августа 2014

Сортировка по дате - со скрытым элементом

Преобразование даты в формат ГГГГММДД и добавление к фактическому значению ( ММ / ДД / ГГГГ ) в <td>, завертывание в элемент, установка стиля display:none; к стихиям. Теперь сортировка по дате будет работать как обычная сортировка. То же самое можно применить к сортировке по дате и времени.

HTML 

<table id="data-table">
   <tr>
     <td><span>YYYYMMDD</span>MM/DD/YYYY</td>
   </tr>
</table>

CSS 

#data-table span {
    display:none; 
}
99 голосов
/ 06 ноября 2015

Вы должны использовать атрибуты данных HTML5. https://www.datatables.net/examples/advanced_init/html5-data-attributes.html

Просто добавьте элемент data-order к элементу td .
Не требуется никаких плагинов. 

<table class="table" id="exampleTable">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Sign Up Date</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td>Peter</td>
            <td data-order="2015-11-13 12:00">13. November 2015</td>
        </tr>
        <tr>
            <td>Daniel</td>
            <td data-order="2015-08-06 13:44">06. August 2015</td>
        </tr>
        <tr>
            <td>Michael</td>
            <td data-order="2015-10-14 16:12">14. October 2015</td>
        </tr>
    </tbody>
</table>


<script>
    $(document).ready(function() {
        $('#exampleTable').DataTable();
    });
</script>
17 голосов
/ 19 мая 2010

Нажмите на ссылку "показать подробности" в разделе Дата (дд / мм / ГГГ) , затем вы можете скопировать и вставить указанный там код плагина

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

jQuery.fn.dataTableExt.oSort['us_date-asc']  = function(a,b) {
    var usDatea = a.split('/');
    var usDateb = b.split('/');

    var x = (usDatea[2] + usDatea[0] + usDatea[1]) * 1;
    var y = (usDateb[2] + usDateb[0] + usDateb[1]) * 1;

    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
    var usDatea = a.split('/');
    var usDateb = b.split('/');

    var x = (usDatea[2] + usDatea[0] + usDatea[1]) * 1;
    var y = (usDateb[2] + usDateb[0] + usDateb[1]) * 1;

    return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
};

Все, что я сделал, это переключил __date_[1] (день) и __date_[0] (месяц) и заменил uk на us, чтобы вы не запутались. Я думаю, что это должно позаботиться об этом для вас.

Обновление № 2: Вы должны просто использовать объект даты для сравнения. Попробуйте это: 

jQuery.fn.dataTableExt.oSort['us_date-asc']  = function(a,b) {
 var x = new Date(a),
     y = new Date(b);
 return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
 var x = new Date(a),
     y = new Date(b);
 return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
};
10 голосов
/ 24 июля 2012

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

jQuery.fn.dataTableExt.oSort['us_date-asc']  = function(a,b) { 
  var x = new Date($(a).text()),
  y = new Date($(b).text());
  return ((x < y) ? -1 : ((x > y) ?  1 : 0)); 
}; 

jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) { 
  var x = new Date($(a).text()),
  y = new Date($(b).text());
  return ((x < y) ? 1 : ((x > y) ?  -1 : 0)); 
};
5 голосов
/ 16 апреля 2015

Начиная с 2015 года, по моему мнению, наиболее удобным способом сортировки столбца Date в DataTable является использование необходимого модуля сортировки . Поскольку формат даты в моем случае был dd/mm/yyyy hh:mm:ss, я использовал плагин date-euro . Все, что нужно сделать, это:

Шаг 1: Включите плагин сортировки Файл JavaScript или код и;

Шаг 2: Добавьте columnDefs, как показано ниже, для нацеливания на соответствующие столбцы. 

$('#example').dataTable( {
    columnDefs: [
       { type: 'date-euro', targets: 0 }
    ]
});
4 голосов
/ 24 ноября 2017

Datatables можно упорядочить только по DateTime в формате "ISO-8601" , поэтому вам нужно преобразовать дату в "date-order" в этот формат (пример с использованием Razor): 

<td data-sort="@myDate.ToString("o")">@myDate.ToShortDateString() - @myDate.ToShortTimeString()</td>
3 голосов
/ 11 апреля 2012

На случай, если у кого-то возникнут проблемы, когда у него есть пробелы в значениях даты или в ячейках, вам придется обрабатывать эти биты. Иногда пустое пространство не обрабатывается функцией отсечения, полученной из html, это похоже на "$ nbsp;". Если вы не справитесь с этим, ваша сортировка не будет работать должным образом и будет нарушена везде, где есть пробел.

Я также получил этот фрагмент кода из расширений jquery и немного его изменил в соответствии со своими требованиями. Вы должны сделать то же самое :) ура! 

function trim(str) {
    str = str.replace(/^\s+/, '');
    for (var i = str.length - 1; i >= 0; i--) {
        if (/\S/.test(str.charAt(i))) {
            str = str.substring(0, i + 1);
            break;
        }
    }
    return str;
}

jQuery.fn.dataTableExt.oSort['uk-date-time-asc'] = function(a, b) {
    if (trim(a) != '' && a!="&nbsp;") {
        if (a.indexOf(' ') == -1) {
            var frDatea = trim(a).split(' ');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1;
        }
        else {
            var frDatea = trim(a).split(' ');
            var frTimea = frDatea[1].split(':');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + frTimea[2]) * 1;
        }
    } else {
        var x = 10000000; // = l'an 1000 ...
    }

    if (trim(b) != '' && b!="&nbsp;") {
        if (b.indexOf(' ') == -1) {
            var frDateb = trim(b).split(' ');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1;
        }
        else {
            var frDateb = trim(b).split(' ');
            var frTimeb = frDateb[1].split(':');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0] + frTimeb[0] + frTimeb[1] + frTimeb[2]) * 1;
        }
    } else {
        var y = 10000000;
    }
    var z = ((x < y) ? -1 : ((x > y) ? 1 : 0));
    return z;
};

jQuery.fn.dataTableExt.oSort['uk-date-time-desc'] = function(a, b) {
    if (trim(a) != '' && a!="&nbsp;") {
        if (a.indexOf(' ') == -1) {
            var frDatea = trim(a).split(' ');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1;
        }
        else {
            var frDatea = trim(a).split(' ');
            var frTimea = frDatea[1].split(':');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + frTimea[2]) * 1;
        }
    } else {
        var x = 10000000;
    }

    if (trim(b) != '' && b!="&nbsp;") {
        if (b.indexOf(' ') == -1) {
            var frDateb = trim(b).split(' ');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1;
        }
        else {
            var frDateb = trim(b).split(' ');
            var frTimeb = frDateb[1].split(':');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0] + frTimeb[0] + frTimeb[1] + frTimeb[2]) * 1;
        }
    } else {
        var y = 10000000;
    }

    var z = ((x < y) ? 1 : ((x > y) ? -1 : 0));
    return z;
};
2 голосов
/ 04 июля 2012

Об обновлении # 1 есть 2 проблемы:

  • Количество дней = 1 (д / мм / гггг) вместо (дд / мм / гггг)
  • Пустая дата

вот решение, чтобы избежать этих проблем: 

jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function (a, b) {
            var ukDatea = a.split('/');
            var ukDateb = b.split('/');

            //Date empty
             if (ukDatea[0] == "" || ukDateb[0] == "") return 1;

            //need to change Date (d/MM/YYYY) into Date (dd/MM/YYYY) 
            if(ukDatea[0]<10) ukDatea[0] = "0" + ukDatea[0]; 
            if(ukDateb[0]<10) ukDateb[0] = "0" + ukDateb[0];

            var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
            var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

            return ((x < y) ? -1 : ((x > y) ? 1 : 0));
        };

        //Sorting by Date 
        jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function (a, b) {
            var ukDatea = a.split('/');
            var ukDateb = b.split('/');

             //Date empty
             if (ukDatea[0] == "" || ukDateb[0] == "") return 1;

            //MANDATORY to change Date (d/MM/YYYY) into Date (dd/MM/YYYY) 
            if(ukDatea[0]<10) ukDatea[0] = "0" + ukDatea[0]; 
            if(ukDateb[0]<10) ukDateb[0] = "0" + ukDateb[0];

            var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
            var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

            return ((x < y) ? 1 : ((x > y) ? -1 : 0));
        };
0 голосов
/ 02 января 2019

Создайте скрытый столбец «dateOrder» (например) с датой в виде строки в формате «yyyyMMddHHmmss» и используйте свойство «orderData», чтобы указать на этот столбец. 

var myTable = $("#myTable").dataTable({
 columns: [
      { data: "id" },
      { data: "date", "orderData": 4 },
      { data: "name" },
      { data: "total" },
      { data: "dateOrder", visible: false }
 ] });
0 голосов
/ 01 августа 2017

Я получил решение после того, как целый день работал над ним. Это маленькое хакерское решение. Добавлен span внутри тега td

. 
<td><span><%= item.StartICDate %></span></td>.

Формат даты, который я использую, - это дд / мм / гггг. Протестировано в Datatables1.9.0

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...