Mixing individual column searches by text and by selection popup

jpr105

Hello,

I really find DataTables very powerful but I'm not experienced enough in programming to make full use of its features .

I found some solutions here:
- https://codepen.io/RedJokingInn/pen/vYJKKEJ
- https://live.datatables.net/pekarebe/1/edit

But it's not exactly what I'm looking for.
What I'm looking for :
- column searches on the same line
- this line under column headings
- column 1: text search, column 2: select input, column 3: text search, column 4: text search

Regarding column 1 :
The data are date type. A multiple selection box allowing selection of one or more years would be great.

Concerning column 2:
Another approach is interesting, as shown here: https://codepen.io/bhargavmehta/pen/Zpzddv.
In this case, the line with the tick boxes should be ABOVE THE COLUMN HEADINGS.

And last but not least:
All this must be responsive, of course

Thank you in advance for your help, programming virtuosos.

Best regards - Jean-Paul

allan

Hi Jean-Paul,

I can't just write the complete code for you, that's what a paid contractor / developer is for, but I can hopefully teach you how to do what you want.

Regarding responsive - that is the easy bit. Just use responsive (make sure you have included the Responsive library on your page - see the download builder).

Column search - If you consider these two examples, you will see that each spins over the columns to initialise its code:

        this.api()
            .columns()
            .every(function () {

To have a mix of select and input elements for the search, you need to have selectors for the columns, and then execute the code for each - e.g.:

this.api().columns('.selectSearch').every( ... );

could be used to select columns with a selectSearch class. Likewise do similar for text inputs to limit to specific columns.

To have them just under the header, have a look at the moments on those pages - there is a little CSS which can be used to do that.

Allan