CODEWITHSUNDEEP
javascripthtmldatatables
FarFigNewton
FarFigNewton

Reputation: 7273

Can't filter datatable by selected value in dropdown

I am using the jQuery plugin DataTables. I have a table of data that has HTML inputs and selects. When I use the DataTable search filter to filter the results and I search for all dropdowns that have the selected value of 'Open', nothing changes.

I believe this is happening because every dropdown in the table has the same options and the filter is searching on them and returning all results, since they all match.

How can I get the filter to search on only the selected value and not all options of the dropdown?

I have tried to find a solution, but all I can find are results like these :

These all deal with adding custom filters for each column, I just want to use the existing DataTable filter.

Example

Live example of the problem, Search for '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>

Upvotes: 5

Views: 5720

Answers (2)

Frank
Frank

Reputation: 1133

Now, you can use a data-search attribute on 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

Upvotes: 3

totymedli
totymedli

Reputation: 31088

There is a better way to put a drop-down list into your cells. Of course this is searchable. You can watch the offical tutorial about this technique.

Client side

Drop-down list creation

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>

The key is the data part. Here you can define the options of your list. You can also add this part dinamically via PHP. The syntax is the following for one option.

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

Every option should be separated by a comma.

Column names

You can also rename your columns as shown in the offical tutorial so when they passed to the server, DataTables won't name them after the <th> tag:

<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

After all, you just have to update your database in UpdateData.php:

$id = $_REQUEST['id'];//The id tag of your table's 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's important to echo (return) the $value variable because:

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

Upvotes: 0

Related Questions