Angular-Datatables sorting date column not working in dd MM yyyy format

Question

I'm using AngularJs to create my frontend project. My goal is to create dinamically N datatables within uib-accordion, uib-accordion-group elements, in this way:

<uib-accordion  class="" close-others="true">
     <div uib-accordion-group class="panel-default" ng-repeat="service in orderOrganizerCtrl.tableServiceIdFilter">
         <uib-accordion-heading>
             {{'2101_OrderEntry.Organizer.Service' | translate}}{{service.key}} <br/>
            <span>{{'2101_OrderEntry.Organizer.SelectedAgenda' | translate}}</span>  {{ orderOrganizerCtrl.getAgendaName(service.key) }} <br/>
            <span>{{'2101_OrderEntry.Organizer.DateHourSelected' | translate}}</span> {{ orderOrganizerCtrl.getAppointment(service.key) }}
         </uib-accordion-heading>
         <!-- Here, datatable content -->
         <table class="table data-table row-border hover" id="agenda_{{service.key}}" datatable="ng">
            <thead>
                <th class="sorting_asc">{{'2101_OrderEntry.Organizer.AgendaServices' | translate}}</th>
                <th class="sorting_asc sorting_1">{{'2101_OrderEntry.Organizer.DateAppointment' | translate}}</th>
                <th class="sorting_asc">{{'2101_OrderEntry.Organizer.HourAppointment' | translate}}</th>
            </thead>
            <tbody>
                <tr ng-click="orderOrganizerCtrl.selectRow(item, 'agenda_' + service.key, service.key)" ng-repeat="item in orderOrganizerCtrl.agendaSimplified track by $index" ng-if="item.serviceName === service.key">
                   <td align="center">{{item.agendaName}}</td>
                   <td align="center">{{item.dateAppointment| date:'dd MM yyyy'}}</td>
                   <td align="center">{{item.hourAppointment}}</td>
                </tr>
            </tbody>
        </table>
     </div>
</uib-accordion>

My problem is the sorting of "dateAppointment" column. Each "item.dateAppointment" element is a Date element. Why sorting is not working? I've tried to use DTColumnDefBuilder with the definition of dtColumnDefs in this way:

this.dtColumnDefs = [  
    DTColumnDefBuilder.newColumnDef(1).
    .withOption('type', 'date')
];

But it is not working (probably because tables are created dinamically). Someone could help me?

Raghav · Accepted Answer · 2017-09-20 10:46:31Z

1

You should specify the sorting order and the column to sort. Try this:

$scope.dtOptions = DTOptionsBuilder.newOptions()
        .withPaginationType('full_numbers')
        .withDisplayLength(10)
        .withOption('order', [0, 'desc']);

$scope.dtColumnDefs = [
        DTColumnDefBuilder.newColumnDef(0).withOption('type', 'date'),
        DTColumnDefBuilder.newColumnDef(1).notSortable(),
        DTColumnDefBuilder.newColumnDef(2).notSortable(),
        DTColumnDefBuilder.newColumnDef(3).notSortable(),
        ...
    ];

Here, first column will be a date column. Hope it helps..

answered Sep 20, 2017 at 10:46

Raghav

1,2294 gold badges19 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular-Datatables sorting date column not working in dd MM yyyy format

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related