Sorting of labels in custom filtering search pane

Sorting of labels in custom filtering search pane

TobiasBgTobiasBg Posts: 8Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,245Questions: 26Answers: 4,760

    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

  • TobiasBgTobiasBg Posts: 8Questions: 1Answers: 0

    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

  • allanallan Posts: 61,609Questions: 1Answers: 10,088 Site admin
    Answer ✓

    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

  • TobiasBgTobiasBg Posts: 8Questions: 1Answers: 0

    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

  • bidon2bidon2 Posts: 20Questions: 2Answers: 0

    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?

  • allanallan Posts: 61,609Questions: 1Answers: 10,088 Site admin

    @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

  • bidon2bidon2 Posts: 20Questions: 2Answers: 0

    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?

  • allanallan Posts: 61,609Questions: 1Answers: 10,088 Site admin

    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

Sign In or Register to comment.