DataTables - PHP/AJAX Multisearch dropdown filters
DataTables - PHP/AJAX Multisearch dropdown filters
donnaWong
Posts: 10Questions: 3Answers: 0
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)
This question has accepted answers - jump to:
Answers
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
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
Thanks for your time & i hope i'll be able to understand and resolve this
Hello Kevin,
That's right, i'd like to have 2 select inputs,
CountryandCity(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.
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?
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 () {) usecolumn-selectorto choose the columns you want to process. For examplethis.api().columns( [2,4] ).every(might be the appropriate columns for the table you show above.Kevin
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,
Took the multi search example and made the changes I suggested here:
http://live.datatables.net/xutodipi/1/edit
Kevin
Thank you so so much Kevin!
If i wanted to add another 2 colums to search
for example,
Name,AgeHow would i do that?
Btw the code is very neat & works wonderfully
Read the
column-selectordocs to learn how to select the columns. The statement withthis.api().columns().every( function () {is where you apply this. See the above comments and thethis.api().columns( [1,2] )to select columns 1 and 2 in the example I provided.Kevin
Brilliant, so i put the column number inside
this.api().columns( [0,1,2] )I couldn't find on
column-selectorhow to completely separate the dropdowns, for example, put each inside a bootstrap gridedit: something like this
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 replacingsearchwith 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
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
Here you go:
http://live.datatables.net/xutodipi/5/edit
Kevin