Sorting of labels in custom filtering search pane
Sorting of labels in custom filtering search pane
![TobiasBg](https://secure.gravatar.com/avatar/50f1cff2e27a1f522b18ce229c057bc5/?default=https%3A%2F%2Fvanillicon.com%2F50f1cff2e27a1f522b18ce229c057bc5_200.png&rating=g&size=120)
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!
This question has an accepted answers - jump to answer
Answers
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
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 originalrender
callback here though (probably in place of thereturn data;
line in your example).Best wishes,
Tobias
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 usingorder
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:
That way everything should work as expected.
The nightly will be up to date with the change soon.
Allan
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
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?
@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
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?
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