Sorting of labels in custom filtering search pane

TobiasBg

Hi!

I'm creating something similar to the "Age" search pane from the example at https://datatables.net/extensions/searchpanes/examples/customFiltering/customOptionConditions.html
This adds custom entries in a search pane, by providing a label and a value function, which is all working nicely.
Now, I'm not yet happy with the order of these labels in the search pane.
The example also shows this nicely: The "Under 20" label is shown below the "Over 60" label, whereas I would like to have it as the first entry in the search pane, to have a much more logical order.
So, my question: How can I change the order of the labels in such a custom search pane?

Thanks!

kthorngren

Use columns.searchPanes.dtOpts along with Orthogonal data to set the column sort value for the Datatable built by SearchPanes. I updated the example you linked to here with one way this can be done.
https://live.datatables.net/lutiqata/1/edit

Kevin

TobiasBg

Hi Kevin,

thanks a lot for your reply, I really appreciate it!
Yes, this looks reasonable. I had tried something similar (passing only the numbers in the searchPane option labels, and adding the text around the numbers in the columns.render option).
However, in that try as well as in your example, the gray "pills" with the number of filter matches at the right are now missing :-( I believe that's because the searchPane DataTable already uses a render callback, which is then overridden here. I can't seem to find a way to call that original render callback here though (probably in place of the return data; line in your example).

Best wishes,
Tobias

allan

Hi Tobias,

Great to see you here again .

I've got a slightly different solution for you that Kevin's example lead me to. The options array is in the order you want, so instruct the DataTable for that pane not to do any ordering on the data. You can do that using order set to an empty array: https://live.datatables.net/lutiqata/2/edit .

That said, it would mean that the two ordering buttons don't quite work, so I've made a small tweak to SearchPane's custom options, allowing them to have an order property.

So you'd do:

          {
            label: 'Under 20',
            value: function(rowData, rowIdx) {
              return rowData[4] < 20;
            },
            order: 1
          },
          {
            label: '20 to 30',
            value: function(rowData, rowIdx) {
              return rowData[4] <= 30 && rowData[4] >=20;
            },
            order: 2
          },

That way everything should work as expected.

The nightly will be up to date with the change soon.

Allan

TobiasBg

Hi Allan,

yes, it's been a long time! :-) I hope you are doing well!

Thanks a lot for taking a look here! This really looks like a good approach, thanks!

I had another idea after thinking about Orthogonal data, as Kevin mentioned: Maybe searchPanes.options.label could also be an object and not just a string, with the four operations from Orthogonal data (display, sort, filter, type). But then again this might be overkill here, especially as your solution only needs that very small code change.

Thanks again!

Best wishes,
Tobias

bidon2

I have a scenario where I need two specific options when exists, among the dynamically populated options retrieved via AJAX, to always appear at the top of a particular pane. How should I handle this?

allan

@TobiasBg - I'm good thanks . I hope everything is likewise with yourself.

Its a nice idea thank - thanks. I'm actually going to rework SearchPanes at some point. I'll look into this option then.

@bidon2 - I've not tried it, but it should be possible with the absolute sorting plug-in. The panes are just DataTables, so it the plug-in is setup to sort your data as needed, then that should work. Use columns.searchPanes.dtOpts to set the options for the target table (in this case the column type on the first column).

Allan

bidon2

Thank you @allan for your prompt reply, I've attempted but haven't been successful with your suggest, What I'm referring to is that the search pane's entries are populated dynamically via AJAX, Among these dynamic entries, there are two specific ones that when they exist, should always appear at the top of the search pane. I'm attempting to achieve the same outcome as TobiasBg, who is trying to reorder these entries or labels to have them appear as the first entries in the search pane. How can I change the order of the labels when the data is fetched via AJAX in my case?

allan

My answer should apply, unless you are using server-side processing (serverSide), in which case the order is defined by the server-side script.

Allan