如何动态填充DataTables选择菜单？

Question

I've a DataTables table that displays information from a MySQL database. I'm trying to create drop-down filters, <select>, like the ones used here. I know that the server-side tables can't use that precise example, but I'm not sure how to change it to make it work with a server-side database table.

How would I create drop-down menus, populated with information from the table/database, to filter a DataTables table?

EDIT: The server side is in PHP. I tried to query the database and create a separate menu with PHP and send the JSON-encoded information into select menus.

Answer 1

Ok I don't know the specifics on how to achieve this with PHP ( I know it is most definitely possible) so I'll give you a generic rundown.You can ask me for specific details later and I'll edit my answer.

First you have to have the ajax source.

You can then use the same function ( from serverside ) to dynamically populate the options in your dropdowns. This is how

1st you make the html code for empty <select id='id1'></select> Then you can use the draw event from datatables on which you can make an ajax request to populate the dropdowns $(oTable).on("draw", function() { ... });. After that you can refresh the table and the dropdowns when one of the select option changes.

This is the most generic way of answering your (vague) question.

Here are some more resources:

Refresh ajax data: how can I trigger jquery datatables fnServerData to update a table via AJAX when I click a button?

Let me know if you have more specific questions.