Question

我有一个jquery数据表，我需要在包含所选选项<select><option selected="selected">**text to filter**</option></select>中的文本的html选择输入的单元格内进行筛选和排序。

所以我需要在表格中搜索包含td的行，其中包含一个选择框，我在其中选择了用于搜索的文本选项。

因此，如果在单元格中，我选择带“文本的选项来过滤”文本，该行必须是可见的。可能吗？我该怎么办？

谢谢

Answer 1

我想你会想要使用自定义过滤。 http://datatables.net/release-datatables/examples/plug-ins/range_filtering.html

请参阅此jsfiddle：http://jsfiddle.net/DYyLd/

搜索“x”，只显示选中“x”的行。更改所选选项，搜索将根据需要找到/忽略它。

$.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) {
        var oTable = $('#myTable').dataTable();
        var nodes = $(oTable.fnGetNodes(iDataIndex));
        var selItem = nodes.find('select').val();

        // This is basic.  You should split the string and look
        // for each individual substring
        var filterValue = $('div.dataTables_filter input').val();

        return (selItem.indexOf(filterValue) !== -1);
    }
);

另外，我补充说：

$('select').click(function() { $('#myTable').dataTable().fnDraw(); });

在更改任何选项时重绘表格 - 这样，它们会被重新过滤。

如示例中所述，我的搜索功能非常基本，只是查看选择框中的所选项是否包含搜索字段中的确切文本，区分大小写。您几乎肯定希望用空格分割字符串，并在selItem中搜索每个子字符串。另请注意，此方法不会搜索其他列 - 它只会在带有选择框的列中查找。您可能还想搜索其他列。

Answer 2

找到了针对这种情况的最佳解决方案，请点击以下链接和示例：

https://datatables.net/examples/plug-ins/dom_sort.html

添加到column: []：

    { "orderDataType": "dom-select" }

和：

/* Create an array with the values of all the select options in a column */
$.fn.dataTable.ext.order['dom-select'] = function  ( settings, col )
{
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        return $('select', td).val();
    } );
}

来自所选选项列的jQuery数据表排序和顺序

2 个答案: