Angular-Datatables неправильная сортировка по дате

Я использую в своем проекте плагин angular-datatables, который отлично работает со всеми типами, кроме дат.

Пример DESC:

  • 01/01/2016
  • 01/08/2015
  • 01/08/2015
  • 01/09/2015

Пример АСЦ:

  • 31/12/2015
  • 31/10/2015
  • 22/10/2015

Я использую Angular Way с фильтром даты в моем ng-repeat. У меня есть подозрение, что он сортирует с неправильным форматом даты. Я бы хотел, чтобы он сортировался по дням. Как я могу это исправить?

<table class="table table-hover" datatable="ng">
        <thead>
            <tr>
                <th>Client</th>
                <th>Project</th>
                <th>ID</th>
                <th>Inv. Date</th>
                <th>Start Date</th>
                <th>End Date</th>
                <th>DKK ex VAT</th>
                <th>CIG</th>
                <th>Attention</th>
                <th>Cust. Manager</th>
                <th>Regarding</th>
                <th>Due Date</th>
                <th>Finalized</th>
                <th>Paid</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="invoice in vm.latestInvoices.LatestInvoices">
                <td>{{invoice.CompanyName}}</td>
                <td>{{invoice.ProjectName}}</td>
                <td>{{invoice.InvoiceID}}</td>
                <td>{{invoice.InvoiceDate | date: 'dd/MM/yyyy'}}</td>
                <td>{{invoice.InvoiceStart | date: 'dd/MM/yyyy'}}</td>
                <td>{{invoice.InvoiceEnd | date: 'dd/MM/yyyy'}}</td>
                <td>{{invoice.DKKexVAT}}</td>
                <td>{{invoice.CustomerInvoiceGroup}}</td>
                <td>{{invoice.Attention}}</td>
                <td>Customer Manager</td>
                <td>{{invoice.Regarding}}</td>
                <td>{{invoice.DueDate | date: 'dd/MM/yyyy'}}</td>
                <td>No</td>
                <td>{{invoice.Paid}}</td>
            </tr>
        </tbody>
    </table>

javascript jquery angularjs datatables angular-datatables
person Mortenkp25    schedule 21.01.2016    source источник
comment
Я использую Angular Way с фильтром даты в моем ng-repeat. - пожалуйста, покажите свой код.   -  person davidkonrad    schedule 22.01.2016
comment
Конечно! :) Обновлено!   -  person Mortenkp25    schedule 22.01.2016

Ответы (3)


arrow_upward
15
arrow_downward

dataTables обычно хорошо справляется со своей задачей, определяя типы данных для каждого столбца. Однако, если обнаружение типа обнаруживает что-либо, которое противоречит, например, предполагаемым числам, столбец превращается в альфа-сортировку по умолчанию. Я твердо верю, что дело обстоит именно так: если визуализированный контент соответствует критериям dd/MM/yyyy на 100 %, то таблицы данных должны автоматически сортировать этот столбец как date.

К счастью, мы можем форсировать тип данных date через настройки columns/columnDefs. Используйте, например, DTColumnDefBuilder :

$scope.dtColumnDefs = [  
    DTColumnDefBuilder.newColumnDef([3,4,5,11]).withOption('type', 'date')
];

Это заставляет столбцы 3,4,5 и 11 иметь тип date. Включите dtColumnDefs в разметку:

<table class="table table-hover" datatable="ng" dt-column-defs="dtColumnDefs">

Пример — попробуйте закомментировать .withOption('type', 'date') и увидите разницу -> http://plnkr.co/edit/XpBcLhlm0Frq3voN6X97?p=preview

person davidkonrad    schedule 22.01.2016
comment
@3rules, спасибо, что заметили. Обновил plnkr на рабочий. Другой был чистым хламом, не знаю, как он оказался таким- - person davidkonrad; 01.02.2018
comment
@davidkonrad, с удовольствием, но плункер все еще не работает, или, может быть, ссылка была той же последней. - person 3 rules; 01.02.2018
comment
@3rules, если вы используете Privacy Badger или аналогичный, отключите его для этого plunkrr. Кажется, он блокирует rawgithub.com... - person davidkonrad; 01.02.2018
comment
@davidkonrad да, Дэвид, теперь все работает, откуда ты знаешь об этой проблеме? А также удалите ‹/div›, указанную в строке № 17. - person 3 rules; 03.02.2018
comment
@3rules, удалили </div>, спасибо. Не знаю, почему этот plunkr был таким запутанным, возможно, он был непреднамеренно перезаписан давным-давно. Я только что заметил, что PB блокирует rawgithub, кажется, это довольно недавняя проблема github.com/rgrove /rawgit/проблемы/163 - person davidkonrad; 03.02.2018
comment
@davidkonrad да, я видел это, кстати, спасибо за обновление, которое поможет и другим. - person 3 rules; 03.02.2018

arrow_upward
0
arrow_downward

Хотя уже поздно, но есть альтернативный подход для тех, кто хочет большей гибкости.

Вы можете решить проблему сортировки способом, указанным в Плагин Ultimate Date/Time sorting.

Код действительно прост:

jQuery.fn.dataTable.moment('DD/MM/YYYY');

Вы можете импортировать плагин из CDN с данными:

  <script src="https://cdn.datatables.net/plug-ins/1.10.13/sorting/datetime-moment.js"></script>


Примечание. Чтобы использовать подключаемый модуль, вам потребуется включить momentJs в свое приложение.

person Chinmay jain    schedule 17.02.2017

arrow_upward
0
arrow_downward

Я решил эту проблему, создав фильтр

dateFilter.js

angular.module("app").filter("dateFilter", function(){
  return function(input) {
    var o = input.replace(/-/g, "/"); // Replaces hyphens with slashes if dd/mm/YYYY format
    return Date.parse(o + " -0000");
  };
});

В html-файле

<span>[[ ::created_at | dateFilter | date:"dd/MM/yyyy HH:mm"]]</span>

Я видел этот ответ некоторое время назад в этом стеке:

AngularJS: как отформатировать формат даты ISO8601?

person heavyrick    schedule 06.07.2017