Search pane content custom order using AJAX data source

jmuller

Hi,

I would like to order the table inside a Search Pane based on the values of another column.
Previously, using DOM as data source, I added the data-order attribute to td and it worked.
After I switched to AJAX as data source, I used the createdCell callback to add the same attribute, however sorting did not work as expected.

columnDefs: [ {searchable: true, searchPanes: {show: true, dtOpts: { order: [[ 0, "desc" ]] }}, targets: [0], 'createdCell': function (td, cellData, rowData, row, col) { $(td).attr('data-order', rowData.date); } } ],

Example: https://live.datatables.net/vawoyune/1/edit
Basically I would like to have the names here sorted on reverse order of the second column, i.e. 'Christmas Day' first, then 'Thanksgiving Day' and so on.

Many thanks!

allan

By the time createdCell runs, it is already too late - DataTables has obtained the information needed for sorting and built its data structure for how to read the data for the table.

The way to do what you are looking for is a combination of columns.searchPanes.orthogonal to tell DataTables / SearchPanes a "name" for the data you want and then columns.render as a function to process that and return the correct data type.

Here is an updated example showing how it can be done: https://live.datatables.net/vawoyune/4/edit .

    columnDefs: [
      {
        searchable: true,
        searchPanes: {
          show: true,
          dtOpts: { order: [[0, "desc"]] },
          orthogonal: {
            sort: 'sort-sp',
            type: 'type-sp'
          }
        },
        targets: [0],
        render: function (d, type, row) {
          if (type === 'sort-sp' || type === 'type-sp') {
            return row.date;
          }
          return d;
        }
      },
    ],

Allan

jmuller

This is great. Thanks a lot for the explanation as well!