DataTables Set Default sorting column and set unsortable columns

Question

Is it possible to set the default column to sort once the page loads? I want to use the one datatable call for different tables across my site. Is it possible to add a th class to achieve this?

I also want to disable sorting on some columns and since i'm looking for the one datatables call to do everything, is there a class i can add to the th that will make it unsortable?

This is my called dataTable script

if (jQuery().dataTable) {
    $('#table-list-items').dataTable({
        "fnDrawCallback" : function () {
        },
        "aLengthMenu": [
        [10, 15, 25, 50, 100, -1],
        [10, 15, 25, 50, 100, "All"]
        ],
        "iDisplayLength": 25,
        "oLanguage": {
            "sLengthMenu": "_MENU_ Records per page",
            "sInfo": "_START_ - _END_ of _TOTAL_",
            "sInfoEmpty": "0 - 0 of 0",
            "oPaginate": {
                "sPrevious": "Prev",
                "sNext": "Next"
            }
        },
        "aoColumnDefs": [{
            'bSortable': true,
            'aTargets': [0]
        }]
    });
}

Answer 1

As per the table sorting docs you can do that using the order option:

$('.table-asc0').dataTable({
  order: [[0, 'asc']]
})

The 0 indicates to sort on the first column, while asc to do it in ascending order. You can chose any other column and use desc too.

---

For DataTables versions prior to 1.10 you should use aaSorting instead

$('.table-asc0').dataTable({
  aaSorting: [[0, 'asc']]
})

To order descending on the first column:

$('.table-asc1').dataTable({
  aaSorting: [[1, 'desc']]
})

Answer 2

SET INITIAL ORDER (DataTables 1.10)

Use order to set initial order of the table.

For example, to sort by second column in descending order:

$('#example').dataTable({
   "order": [[ 1, 'desc' ]]
});

See this jsFiddle for code and demonstration.

---

DISABLE SORTING FOR A COLUMN (DataTables 1.10)

Use columnDefs and orderable to disable sorting on certain columns.

For example, to disable sorting on third and forth columns:

$('#example').dataTable({
   "columnDefs": [
      { "targets": [2,3], "orderable": false }
  ]
});

See this jsFiddle for code and demonstration.

---

SET INITIAL ORDER AND DISABLE SORTING FOR THE SAME COLUMN (DataTables 1.10)

You can combine order option to set initial order of the table and orderable to disable sorting on the same column.

For example:

$('#example').dataTable({
   "order": [[ 0, 'desc' ]],
   "columnDefs": [
      { "targets": [0], "orderable": false }
  ]
});

See this jsFiddle for code and demonstration.

Answer 3

You can do this via the data-order data attribute on the table HTML which will give you the flexibility you need on a table by table basis while still allowing you to use a single call to initialise your dataTables:

<table className="table table-condensed table-striped" data-order="[[ 2, &quot;asc&quot; ]]" id="tableId">
    <thead>
        <tr>
          <th>Col1</th>
          <th>Col2</th>
          <th>Col3</th>
          <th>Col4</th>
          <th>Col5</th>
          <th>Col6</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>Val1</td>
          <td>Val2</td>
          <td>Val3</td>
          <td>Val4</td>
          <td>Val5</td>
          <td>Val6</td>
        </tr>
    </tbody>
</table>

Answer 4

Just Include the following code:

    $(document).ready(function() {
        $('#tableID').DataTable( {
            "order": [[ 3, "desc" ]]
        } );
    } 
);

Reference:

https://datatables.net/examples/basic_init/table_sorting.html

Answer 5

is corect and worked:

    $('#admin').DataTable({
        "aaSorting": [[3, 'desc']],
        "bPaginate": true,
        "bProcessing": true,
        "columns": [
            {'data' : 'request_code'},
            {'data' : 'name_receiver'},
            {'data' : 'name_area'},
            {'data' : 'created_at'},
            {'data' : 'state'},
            {'data' : 'city'},
            {'data' : 'history'},
        ],
        "ajax": "{{route('my.route.name')}}",
        dom: 'Bfrtip',
        buttons: ['copy', 'excel', 'print'],
    });