DataTables - PHP/AJAX Multisearch dropdown filters

DataTables - PHP/AJAX Multisearch dropdown filters

donnaWongdonnaWong Posts: 10Questions: 3Answers: 0
edited October 2021 in DataTables

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

  • donnaWongdonnaWong Posts: 10Questions: 3Answers: 0
    edited October 2021

    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

  • donnaWongdonnaWong Posts: 10Questions: 3Answers: 0
    edited October 2021

    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?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited October 2021

    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

  • donnaWongdonnaWong Posts: 10Questions: 3Answers: 0

    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,

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

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

    Kevin

  • donnaWongdonnaWong Posts: 10Questions: 3Answers: 0

    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 :smile:

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    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

  • donnaWongdonnaWong Posts: 10Questions: 3Answers: 0

    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

  • donnaWongdonnaWong Posts: 10Questions: 3Answers: 0

    edit: something like this

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    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

  • donnaWongdonnaWong Posts: 10Questions: 3Answers: 0
    edited October 2021

    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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
Sign In or Register to comment.