DataTables - PHP/AJAX Multisearch dropdown filters

donnaWong

Description of problem:
I have my datatables and i want to filter them with dropdowns:

With the method this is being done, only "Country" is being fetched and filtered successfully.

I want to create two dropdown filter options for "Country, City"

Link to test case: https://github.com/bob69420x/php-datatable-ajax-filters

edit: im aware of https://datatables.net/examples/api/multi_filter_select
But it is not quite what i want, i'd like to implement a certain amount of filters, on top of the table (as shown in the picture)

kthorngren

Are you saying you want one filter for "Country, City" or two select inputs, one for Country and another for City?

If just one then in your event handler split the "Country, City" string and perform individual column searches. Are you asking how to build the selects or how to perform the searches?

If you want individual select inputs fo reach column you can sill use the code in the multi select example you just need to place the selects in different HTML elements.

The Search Builder or Search Panes extensions might be of interest.

If you still need help it will be easier for us if you provide a running test case.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

donnaWong

Hello kthorngren,

I want 2 different input fields, one for [Country] one for [City]
The values inside the inputs are fetched from the database,
user selects which he wants from both fields for a final combination results in the table

It is mainly written in PHP with loops etc so i don't know how to make it into HTML for a running test case. So i uploaded the piece of code in github which is functioning as is

Example:
person 1: City: Rome | Country: Italy
person 2: City: Milan | Country: Italy

User selects from the dropdown menu: [City=Rome] [Country=Italy]

Datatable result = person 1

Thanks for your time & i hope i'll be able to understand and resolve this

donnaWong

Hello Kevin,

That's right, i'd like to have 2 select inputs, Country and City (as shown in the picture)
The values are being fetched from the database.

This piece of code is the closest thing of what i want to do, since it's mainly in php with loops and queries, it is hard for me to make it into html for a running test case, im sorry.

That is why i uploaded in github which is working as is.

Example:

DataTable=
Person1 = | City: Venice | Country: Italy |
Person2 = | City: Naples | Country: Italy |

User selects = [City=Venice] [Country=Italy]

Result in datatable = Person1 = | City: Venice | Country: Italy |

Let me remind you that, only "Country" input is being fetched and working properly,
id like to create "City" as well.

So, what would be the right approach for the DataTable with live AJAX and PHP?

kthorngren

I would use the technique in the multi select example. In line 7 (.appendTo( $(column.footer()).empty() ) change the selector $(column.footer()) to a jQuery selector for you custom inputs.

In line 4 (this.api().columns().every( function () {) use column-selector to choose the columns you want to process. For example this.api().columns( [2,4] ).every( might be the appropriate columns for the table you show above.

Kevin

donnaWong

Hello again Kevin,
Could you please show me a working example at http://live.datatables.net/ ?

Also i'd like the inputs to be on top of the datatable,
which i fail to do so with that method.

Thank you for your time and insights,

kthorngren

Took the multi search example and made the changes I suggested here:
http://live.datatables.net/xutodipi/1/edit

Kevin

donnaWong

Thank you so so much Kevin!
If i wanted to add another 2 colums to search

for example, Name , Age
How would i do that?

Btw the code is very neat & works wonderfully

kthorngren

Read the column-selector docs to learn how to select the columns. The statement with this.api().columns().every( function () { is where you apply this. See the above comments and the this.api().columns( [1,2] ) to select columns 1 and 2 in the example I provided.

Kevin

donnaWong

Brilliant, so i put the column number inside this.api().columns( [0,1,2] )

I couldn't find on column-selector how to completely separate the dropdowns, for example, put each inside a bootstrap grid

donnaWong

edit: something like this

kthorngren

That is not something Datatables will manage for you. You will need to create a unique ID for each grid element or whatever you want to use for the inputs. Maybe a sequential ID like search1, search2, etc. Use a counter in the loop to create the ID that is appended to replacing search with the generated ID in this line .appendTo( $('#search') ).

If you want specific help please update the test case with what you want to do so we can help with specific changes.

Kevin

donnaWong

Hello again Kevin,

Excuse me im a beginner, everything is so fascinating to me.
Im not quite sure how i could make a counter loop to replace search with a generated ID, in order to put them into different divs to put space between them.

Could you please show me here how to do that?
http://live.datatables.net/xutodipi/4/edit

I do really appreciate your efforts

kthorngren

Here you go:
http://live.datatables.net/xutodipi/5/edit

Kevin