jQuery 数据表从选定的选项列排序和排序 [英] jQuery datatable sort and order from selected option column

问题描述

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

I have a jquery datatable and I need to filter and sort inside a cell that contains html select inputs by the text in the selected option <select><option selected="selected">**text to filter**</option></select>.

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

So I need to search the rows in the table that contain a td that contains a select box where I've selected the option with the text used for the search.

因此，如果在单元格中选择带有 要过滤的文本" 文本的选项，该行必须可见.是否可以?我该怎么做?

So if in a cell I choose the option with "text to filter" text that row must be visible. Is it possible? How can I do it?

谢谢

推荐答案

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

You'll want to use custom filtering, I think. http://datatables.net/release-datatables/examples/plug-ins/range_filtering.html

看这个jsfiddle:http://jsfiddle.net/DYyLd/

See this jsfiddle: http://jsfiddle.net/DYyLd/

搜索x"，只会显示选择了x"的行.更改选定的选项，搜索将根据需要找到/省略它.

Search for "x" and only the row with "x" selected will show. Change the selected option, and the search will find it/omit it as appropriate.

$.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(); });

当任何选择发生变化时，它会重新绘制表格 - 这样，它们就会被重新过滤.

which redraws the table when any of the selects are changed - that way, they are re-filtered.

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

As commented in the example, my search function is very basic, only looking to see if the selected item in the select box contains the exact text in the search field, case sensitive. You would almost certainly want to split the string by spaces, and search for each substring in selItem. Also notice this method doesn't search other the column(s) - it only looks in the column with the select box. You may want to search the other columns as well.

这篇关于jQuery 数据表从选定的选项列排序和排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！