JQuery Datatable - Sort by multiple columns if necessary

Question

I have this html table:

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <table class="table table-bordered" id="resourcesActivitysTable"> <thead> <tr> <th>Order</th> <th>Priority</th> <th>Date</th> </tr> </thead> <tbody> <tr> <td>SomeString</td> <td>1</td> <td>28.09.2018</td> </tr> <tr> <td>SomeString</td> <td>3</td> <td>20.09.2018</td> </tr> <tr> <td>SomeString</td> <td>1</td> <td>27.09.2018</td> </tr> </tbody> </table> 

This is my Datatable Configuration:

$('#resourcesActivitysTable').dataTable({

        //"order": [[ 1, 'asc' ]],
        "aaSorting": [[1, "asc"]],
        "iDisplayLength": 10,
        "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,

        "language": {
            "sEmptyTable": "Keine Daten in der Tabelle vorhanden",
            "sInfo": "_START_ bis _END_ von _TOTAL_ Einträgen",
            "sInfoEmpty": "0 bis 0 von 0 Einträgen",
            "sInfoFiltered": "(gefiltert von _MAX_ Einträgen)",
            "sInfoPostFix": "",
            "sInfoThousands": ".",
            "sLengthMenu": "_MENU_ Einträge anzeigen",
            "sLoadingRecords": "Wird geladen...",
            "sProcessing": "Bitte warten...",
            "sSearch": "Suchen",
            "sZeroRecords": "Keine Einträge vorhanden.",
            "oPaginate": {
                "sFirst": "Erste",
                "sPrevious": "Zurück",
                "sNext": "Nächste",
                "sLast": "Letzte"
            },
            "oAria": {
                "sSortAscending": ": aktivieren, um Spalte aufsteigend zu sortieren",
                "sSortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
            }
        },
        "fnDrawCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            var table = $('#resourcesActivitysTable').DataTable()

            table.rows().every(function (rowIdx, tableLoop, rowLoop) {
                var data = this.data();
                //  getOrderStatus(data.orderID);
            });
        }
    });

The Datatable sort the Data by the second column (Priority).

My problem is, if the Priority is the same, the table should be sorted by the Date column.

This is my wish result:

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <table class="table table-bordered" id="resourcesActivitysTable"> <thead> <tr> <th>Order</th> <th>Priority</th> <th>Date</th> </tr> </thead> <tbody> <tr> <td>SomeString</td> <td>1</td> <td>27.09.2018</td> </tr> <tr> <td>SomeString</td> <td>1</td> <td>28.09.2018</td> </tr> <tr> <td>SomeString</td> <td>3</td> <td>20.09.2018</td> </tr> </tbody> </table> 

Anyone here an idea how i can sort the Table Data by Date if the priority is the same?

Answer 1

We can able to do sorting with multiple columns in datatable. Please check below code,

"order": [[ 0, 'desc' ],[ 1, 'asc' ]]

In the above, 0 indicates the first column in a table. 1 indicates the second column.