5

我正在使用 jQuery 插件 DataTables。我有一个包含 HTML 输入和选择的数据表。当我使用 DataTable 搜索过滤器过滤结果并搜索具有选定值“打开”的所有下拉列表时，没有任何变化。

我相信这种情况正在发生，因为表中的每个下拉列表都具有相同的选项，并且过滤器正在搜索它们并返回所有结果，因为它们都匹配。

如何让过滤器仅搜索所选值而不是下拉列表的所有选项？

我试图找到一个解决方案，但我能找到的只是这样的结果：

这些都涉及为每列添加自定义过滤器，我只想使用现有的 DataTable 过滤器。

例子

问题的实时示例，搜索“打开”或“关闭”

代码

<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>
4

2 回答 2

2

现在，您可以在数据表data-search上使用属性。参考<td>-element

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

小提琴

我在 datatables.net 上的类似问题

于 2016-10-05T07:42:18.053 回答
0

有一种更好的方法可以将下拉列表放入您的单元格中。当然，这是可以搜索的。您可以观看有关此技术的官方教程。

客户端

下拉列表创建

当你初始化插件时，你可以这样做：

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

关键是数据部分。您可以在此处定义列表的选项。你也可以通过 PHP 动态地添加这部分。一个选项的语法如下。

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

每个选项都应该用逗号分隔。

列名

您还可以重命名列，如官方教程中所示，因此当它们传递到服务器时，DataTables 不会在<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>

服务器端

毕竟，您只需要在以下位置更新您的数据库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';
}

echo（返回）$value变量很重要，因为：

  • 表示更新成功。
  • 该值将是表中的新值。
  • 如果您返回其他内容，它将被视为一条错误消息，该消息将显示在弹出窗口中，并且不会在表格中显示任何更改。
于 2013-02-06T04:37:31.960 回答