我正在使用jQuery插件DataTables。我有一个包含HTML输入和选择的数据表。当我使用DataTable搜索过滤器过滤结果并搜索具有所选值“打开”的所有下拉列表时,没有任何变化。
我相信这种情况正在发生,因为表格中的每个下拉菜单都有相同的选项,过滤器正在搜索它们并返回所有结果,因为它们都匹配。
如何让过滤器仅搜索选定的值而不是下拉列表的所有选项?
我试图找到一个解决方案,但我能找到的结果都是这样的结果:
这些都涉及为每列添加自定义过滤器,我只想使用现有的DataTable过滤器。
Live example of the problem,搜索“打开”或“关闭”
<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>
答案 0 :(得分:1)
现在,您可以在data-search
上使用数据表的<td>-element
属性。 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>
答案 1 :(得分:0)
有一种更好的方法可以将下拉列表放入您的单元格中。当然这是可搜索的。您可以观看有关此技术的offical tutorial。
初始化插件时,您可以执行以下操作:
<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以dinamically方式添加此部分。一个选项的语法如下。
'variable_sent_to_UpdateData.php':'Text that will be displayed'
每个选项都应以逗号分隔。
您也可以按offical tutorial所示重命名列,这样当它们传递到服务器时,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
变量非常重要,因为: