How to add a filter select box in top form ?

Loenix

Hello,

I am using DataTables v1.11.2 via Yarn + Webpack with serverProcessing & Bootstrap 5.
I would like a select box filtering the query sent to server
Here are all the points I need:

• The select box appears in header form, between "Show X rows" and "Search"
  => I didn't find how to do that at all
• When requesting results to the server, the value always appears in query string
  => Using a function as ajax.data seems to do the job => https://datatables.net/reference/option/ajax.data
• The select box is always having a value, it has a default value and it uses it for the first request
• When selecting another value, the table immediately refresh and show new results
  => Using ajax.reload() should be ok => https://datatables.net/reference/api/ajax.reload()

My request seems very classic for me but I didn't find help on documentation for all points.
Have you any advice pls ?

kthorngren

The select box appears in header form, between "Show X rows" and "Search"
=> I didn't find how to do that at all

See if this example of adding custom toolbar elements helps.

When requesting results to the server, the value always appears in query string
=> Using a function as ajax.data seems to do the job =>

That is the way recommended way, see this example.

The select box is always having a value, it has a default value and it uses it for the first request

Thats up to you, Datatables won't control the custom select input.

When selecting another value, the table immediately refresh and show new results
=> Using ajax.reload() should be ok =>

That'll work. Another alternative is to use draw() if you are using server side processing (serverSide: true).

Kevin