orderData and target together in Datatable

Viewed 833

In this example for multi-column sorting

$('#example').dataTable( {
  "columnDefs": [
    { "orderData": [ 0, 1 ],    "targets": 0 },
    { "orderData": 0,           "targets": 1 },
    { "orderData": [ 2, 3, 4 ], "targets": 2 }
  ]
} );

what does "orderData": 0, "targets": 1 mean ?

Example taken from here : https://datatables.net/reference/option/columns.orderData

Context : I wanted to add a new column to an existing datatable (in BIRT). But when I change the code, the sorting arrows vanish. So I had to look up this example code.

1 Answers

Initial point to remember: Column indexes are zero-based - so, column 0 is the first column you see in the table; column 1 is the second column - and so on. The column indexes are assigned when the data table is first created, based on the order in which they are defined in the HTML table (or in the DataTable itself).


The specific example:

"orderData": 0,           "targets": 1

means that when a user clicks on the heading for column index 1 (i.e. the second column in the table), the data in the table will be sorted by data in column 0 (i.e. the first column in the table).

I find it a bit more intuitive to swap these around - to read them from left to right:

{ "targets": 1, "orderData": 0 }

Because there is only one value in the orderData list, it does not need to be in an array.

Another example:

{ "targets": 0, "orderData": [ 0, 1 ] }

This means: When I click on column index 0, the data will be sorted by column index 0, and then sub-sorted by column index 1. Here the two values need to be in an array: [ ].

A typical use for this is if you want to sort a visible column based on the data in a hidden column - especially if the data in the visible column is not naturally sortable in the way you want.


When you add more columns to a table, as in your case, then you may need to adjust the column index numbers accordingly.

Related