JQuery Datatables在input内search并select
使用JQuery数据表input和select如下所示： http : //datatables.net/examples/api/form.html或如果我使用自定义列呈现处理程序来产生input，并select如何使全局表search工作？
如果查看示例，您会注意到只有第一列（只读一列）包含在search中，我可以做些什么来在search中包含其他列？
如果您在我的问题的链接中查看示例，并在search中input“东京”，则返回所有行。 这是因为“东京”是所有下拉菜单中的一个选项。 我只想要东京select显示行。 如果您input“33”，即使第一列的第一列中的值为“33”，您也不会看到任何行。
我似乎无法find任何关于如何定义数据表中特定单元格的search值的文档。
这是不是很好的文件。 （子）版本之间似乎工作不同，或者根本不工作。 我认为dataTables的目的是自动检测HTML列，但由于某种原因，大多数时候，它不。 最安全的方法是创build您自己的searchfilter：
$.fn.dataTableExt.ofnSearch['html-input'] = function(value) { return $(value).val(); }; 这将返回33在<input>的值为33，而东京在<select>的东京被选中。 然后定义types为html-input的所需列;
var table = $("#example").DataTable({ columnDefs: [ { "type": "html-input", "targets": [1, 2, 3] } ] });
看演示基于http://datatables.net/examples/api/form.html – > http://jsfiddle.net/a3o3yqkw/
关于实时数据 ：问题是，基于types的filter只被调用一次 。 dataTables然后caching返回的值，所以它不需要一遍又一遍“计算”所有的值。 幸运的是，dataTables 1.10.x有一个内置的cells ， rows和pages函数称为invalidate ，强制dataTables重置所选项目的caching。
但是，在处理<input>也存在这个问题，编辑该值不会改变value属性本身。 所以即使你调用invalidate() ，你仍然会过滤旧的“硬编码”值。
但是我find了一个解决scheme。 强制使用<input>的当前值（新值）更改<input>的value属性， 然后调用invalidate ：
$("#example td input").on('change', function() { var $td = $(this).closest('td'); $td.find('input').attr('value', this.value); table.cell($td).invalidate(); });
textareas使用text()来代替：
$("#example td textarea").on('change', function() { var $td = $(this).closest('td'); $td.find('textarea').text(this.value); table.cell($td).invalidate(); });
处理<select>时也是如此。 您将需要更新相关<option>的selected属性，然后invalidate()单元invalidate() ：
$("#example td select").on('change', function() { var $td = $(this).closest('td'); var value = this.value; $td.find('option').each(function(i, o) { $(o).removeAttr('selected'); if ($(o).val() == value) $(o).attr('selected', true); }) table.cell($td).invalidate(); });
分叉小提琴 – > http://jsfiddle.net/s2gbafuz/尝试改变input和/或下拉的内容，并search新的值…
这应该search整个表格而不是特定的列。
var table = $('#table').DataTable(); $('#input').on('keyup', function() { table.search(this.val).draw(); });
这里要做的最好的事情就是将单元格容器更新为来自input的新值，并使可数据对象与UIinput保持同步：
$("#pagesTable td input,#pagesTable td select").on('change', function () { var td = $(this).closest("td"); dataTable.api().cell(td).data(this.value); });
replace你input的Textarea ，并添加下面的CSS。 这将使你的textarea看起来像一个input。
textarea{ height: 30px !important; padding: 2px; overflow: hidden; }
