2

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

因此，我需要搜索表中包含 td 的行，该 td 包含一个选择框，我在其中选择了带有用于搜索的文本的选项。

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

谢谢

4

3 回答 3

2

我想你会想要使用自定义过滤。 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 中搜索每个子字符串。另请注意，此方法不会搜索其他列 - 它仅在带有选择框的列中查找。您可能还想搜索其他列。

于 2013-05-15T17:59:23.927 回答
0

找到这种情况的最佳解决方案，请点击此链接和示例：

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();
    } );
}
于 2018-08-27T09:39:33.267 回答
0

如果要根据选择对数据表中的列进行排序，可以使用数据表站点 ( https://datatables.net/examples/plug-ins/dom_sort.html ) 中的示例，但必须将其更改为一点点启用对文本而不是值的排序。在示例中，它说要添加：

{ "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();
    });
}

这会将列排序为选项的值。为了排序到文本值，我稍微改变了上面的函数：

/* 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(); // <== the original solution
        var idx = $('select', td)[0].selectedIndex;
        var elm = $('select', td)[0][idx];
        // elm is the HTML element
        var s = elm.text;
        s = s.replace(/(<([^>]+)>)/gi, "");
        // s contains the string value of the option
        return s;
    });
}

现在，当用户单击列标题时，该列将按可见值排序。

我希望它也对你有用！

于 2021-10-11T15:37:48.570 回答