Unable to filter data by selected value in dropdown menu

Question

I use jQuery plugins plugins. I have a data table that has HTML inputs and selects. When I use the DataTable search filter to filter the results, and I look for all the drop-down lists that have the Open value selected, nothing changes.

I believe this is because each drop-down list in the table has the same parameters, and the filter searches for them and returns all the results, since they all match.

How can I make the filter search only the selected value, and not all the parameters of the drop-down list?

I tried to find a solution, but all I can find are the results:

• Jquery datatables dropdown filter
• Customfilter

This is all about adding custom filters for each column, I just want to use the existing DataTable filter.

Example

Live example of a problem , Search Open or Closed

Code

<table> <thead> <tr> <th>Name</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td><input name="name" type="text" value="Need more memory" id="name1"></td> <td><select name="status" id="status1"> <option value="2">Closed</option> <option selected="selected" value="1">Open</option> </select> </td> </tr> <tr> <td><input name="name" type="text" value="Can't connect" id="name2"></td> <td><select name="status" id="status2"> <option selected="selected" value="2">Closed</option> <option value="1">Open</option> </select> </td> </tr> </tbody> </table> 

Answer 1

Now you can use the data-search attribute in the <td>-element with data tables. ref

 <tr> <td> <input name="name" type="text" value="Need more memory" id="name1"> </td> <td data-search="Open"> <select name="status" id="status1"> <option value="2">Closed</option> <option selected="selected" value="1">Open</option> </select> </td> </tr> <tr> 

fiddle

my similar question on datatables.net

Answer 2

There is a better way to put a dropdown in your cells. Of course, this is searchable. You can see the official manual about this technique.

Client side

Create a list down

When you initialize the plugin, you can do this:

 <script type="text/javascript"> $(document).ready(function () { $('#datatable').dataTable().makeEditable({ sUpdateURL: "UpdateData.php",//Server side file accepting AJAX call. "aoColumns": [//Column settings. {},//1st column with default settings. {//2nd column to a drop-down list. indicator: 'Saving...', loadtext: 'Loading...', type: 'select',//This will make it a drop-down list. onblur: 'submit', data: "{'open':'Open','closed':'Closed'}" }] }); }); </script> 

A key is a piece of data. Here you can define the parameters of your list. You can also add this part dynamically through PHP. The syntax is as follows for one parameter.

 'variable_sent_to_UpdateData.php':'Text that will be displayed' 

Each option must be separated by a comma.

Column names

You can also rename your columns, as shown in the official guide , so when they are transferred to the server, DataTables will not name them after the <th> :

 <script type="text/javascript"> $(document).ready(function () { $('#datatable').dataTable( aoColumns: [//Rename columns contained by AJAX call. {sName: "name"}, {sName: "status"} ] ).makeEditable({ //Previous stuff... }); }); </script> 

Server side

In the end, you just need to update your database in UpdateData.php :

 $id = $_REQUEST['id'];//The id tag of your table row. $column = $_REQUEST['columnName'];//Column where the cell was edited. $value = $_REQUEST['value'];//The new value. $columnPosition = $_REQUEST['columnPosition']; $columnId = $_REQUEST['columnId']; $rowId = $_REQUEST['rowId']; switch ($column) { case 'name': //Do SQL update... echo $value; break; case 'status': //Do SQL update... echo $value; break; default: echo 'Error'; } 

It is important to echo (return) the $value variable because:

• Indicates that the update was successful.
• This value will be the new value in the table.
• If you return something else, it will be considered an error message that will be displayed in a pop-up window and no changes to the table will be shown.