Custom sorts and Custom Sorts of Custom searchPanes Panes

syl_jeverett

I've been trying custom sorts of a column, as well as custom sorts of a custom searchPanes Pane with mixed success. I seem to have the custom column sort working fine, but the custom Pane isn't sorting as hoped.
Here's a link to a test case showing what I'm trying to accomplish:
https://live.datatables.net/cukoruma/1/edit?html,js,output

Basically, for both the custom column sort and the custom Pane sort, I'm using (vulnerability scan) categories of CRITICAL, HIGH, MEDIUM, and LOW, where (contrary to alphabetical order, LOW should come after MEDIUM).
(In actual practice, I wouldn't repeat the Severity data in the custom Pane, but rather would have more meaningful conditions to pick like "Windows OS Updates" and "3rd Party Browser Updates", but which I'd still want to present in an arbitrary order (of importance) rather than alphabetically by label).

For the custom sort on the column, which works, I basically adapted by technique I found from in this discussion/test case:

... where I take my column (identified by a class):

<th class="min filter sortsev">Severity</th>

and setup a custom render in the columnDefs:

            {
                targets: 'sortsev',
                render: function (data, type, row, meta) {
                    if (type === 'sort') {
                        switch (data) {
                            case 'CRITICAL':
                                return 0;
                            case 'HIGH':
                                return 1;
                            case 'MEDIUM':
                                return 2;
                            case 'LOW':
                                return 3;
                        }
                    }
                    return data;
                }
            },

This seems to work fine. The example I built on was from 2018, and was using JQuery 1.11.3 -- and it looks like there is newer style syntax in the current columns.render documentation -- so, if there are any more advisable ways to do this, I'd appreciate any pointers.

On the other hand, I do not seem to be able to get a custom sort working on a searchPane custom Pane. Here, I have a working custom Pane defined in my layout:

           topStart: {
                searchPanes: {
                    cascadePanes: true,
                    order: ['Custom Pane','Vulnerabity', 'Severity'],
                    panes: [
                        {
                            header: 'Custom Pane',
                            options: [
                                {
                                    label: 'LOWS',
                                    value: function (rowData, rowIdx) {
                                        return rowData[1] === 'LOW';
                                    }
                                },
                                {
                                    label: 'MEDIUMS',
                                    value: function (rowData, rowIdx) {
                                        return rowData[1] === 'MEDIUM';
                                    }
                                },
                                {
                                    label: 'HIGHS',
                                    value: function (rowData, rowIdx) {
                                        return rowData[1] === 'HIGH';
                                    }
                                },
                                {
                                    label: 'CRITICALS',
                                    value: function (rowData, rowIdx) {
                                        return rowData[1] === 'CRITICAL';
                                    }
                                },

                            ]
                        }
                    ]
                },
            },

... and I tried to use the technique in this discussion/test case which recommends "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".

However, my stab at doing this:

           { searchPanes: {
              show: true,
              orthogonal: {
                sort: 'sort-sp',
                type: 'type-sp'
                }
              }, 
             targets: '[0]',
             render: function (d, type, row) {
              if (type === 'sort-sp' || type === 'type-sp') {
                switch (d) {
                            case 'CRITICALS':
                                return 0;
                            case 'HIGHS':
                                return 1;
                            case 'MEDIUMS':
                                return 2;
                            case 'LOWS':
                                return 3;
                }
              }
                return d;
              }
            },

doesn't seem to work. However, my case has a few variations from the source inspiration such as:
1. my case is a custom created and sorted pane, not an actual column derived pane, so maybe the target doesn't work as I'm expecting here.
2. my custom created pane has "options" with a "label", but maybe that's different than the 'd'/column data that is being passed in the example render function
3. the source example has only one pane in its searchPanes, so the columnDef setting up the searchPane and the custom sort options are in a single searchPanes/target definition, whereas I have multiple searchPanes/target definitions (for visible, hidden, and custom sort columns/panes.) So, maybe I'm doing some wrong syntax here or something.

I'd appreciate any help or pointers on understanding how to get the custom sort on the custom pane working. Of course, if a custom search isn't actually possible here, that'd be good to know too -- worse case, I could just manipulate the "labels" of the custom pane (e.g. "0_CRITICAL", "1_HIGH", etc.) to sort as desired.

Thanks for any advice!

kthorngren

I tried using columns.render in the searchPanes.panes option but it didn't run. Not sure if it is expected to:
https://live.datatables.net/bosegije/1/edit

This thread with a couple options. Allan presents a couple of solution. One is to place the options in the desired order and set the order to none. Here is the updated test case with this option:
https://live.datatables.net/coyarowi/1/edit

The other is to use the order property. I didn't find any documentation for this property. I may have not applied it correctly but it doesn't seem to work. @allan will need to take a look:
https://live.datatables.net/bamuvuno/1/edit

Kevin

syl_jeverett

Thanks much! Setting the sort order to none is a good workaround for me -- since I'm the one setting up the pane options array, it's easy enough for me to put the objects into it in the order I'd like.

With the help of your pointer, I found more dtOps and panes setting values, and put what I could imagine might be a useful reference to others into an updated test case:
https://live.datatables.net/cukoruma/2/edit

Curiously, there are actually a few different sort variations I found to work:

                            dtOpts: {
                              // This presents raw/unsorted order of "options:" listed below
                              order: [],
                              // So does this for some reason
                              // order: [[1, 'asc']],
                              // This presents in reverse the raw/unsorted order of "options" below
                              // order: [[1, 'desc']],
                              // This presents in alphabetical order the "options" below (default, if no order defined)
                              // order: [[0, 'asc']],
                              // This presents in reverse alphabetical order the "options" below
                              // order: [[0, 'desc']],
                            },
                            options: [
                                {
                                    label: 'CRITICALS',
                                    value: function (rowData, rowIdx) {
                                        return rowData[1] === 'CRITICAL';
                                    }
                                },
                                {
                                    label: 'HIGHS',
                                    value: function (rowData, rowIdx) {
                                        return rowData[1] === 'HIGH';
                                    }
                                },
                                {
                                    label: 'MEDIUMS',
                                    value: function (rowData, rowIdx) {
                                        return rowData[1] === 'MEDIUM';
                                    }
                                },
                                {
                                    label: 'LOWS',
                                    value: function (rowData, rowIdx) {
                                        return rowData[1] === 'LOW';
                                    }
                                },
                            ]