具有复杂 DOM 结构的输入/选择中的 JQuery DataTables 搜索答案

【问题标题】：JQuery DataTables Search within Input/Select With Complex DOM Structure具有复杂 DOM 结构的输入/选择中的 JQuery DataTables 搜索
【发布时间】：2018-06-21 20:48:34
【问题描述】：

下面两个线程处理了一个和我类似的问题，但是因为太简单了，没有解决我的问题，

JQuery Datatables search within input and select

Search within input tag with Datatables

我有一个由输入字段、文本/选择输入组成的数据表。要在其中启用搜索功能，我知道我可以做到

$.fn.dataTableExt.ofnSearch['html-input'] = function(value) {
    return $(value).val(); //will search in value attibute of element
};

然后附上

var table = $("#example").DataTable({
    columnDefs: [{ "type": "html-input", "targets": [2, 3, 4] }] 
});

但这假设我有一个简单的 DOM 结构，其中字段直接位于我的 TD 标记下。这是其中一个链接的原始简单示例。

https://jsfiddle.net/dL52ecjs/3/

我从 Fiddle 做了一个 Fork，我将 DOM 更改如下：

名称：包裹在 <DIV> 中，并在同一单元格中添加第二个输入。搜索应适用于两者。
年龄：包裹在<DIV> 内

新小提琴： https://jsfiddle.net/9vL1yukp/1/

不再起作用了。我的列可以单独具有不同的层或附加控件。

实际上，即使我只添加了一个 <DIV> 包装器，它也无法使用，因此即使是很小的修改（没有任何新控件）也不起作用。

【问题讨论】：

标签： jquery datatables

【解决方案1】：

尝试获取“总价值”

$.fn.dataTableExt.ofnSearch['html-input'] = function(el) {
    var inputs = $(el).find('input[value]');
    var all_values = "";
    inputs.each( function( i, e) {
        all_values += $(e).val();
    } );
    return all_values;
};
var table = $("#example").DataTable({
    columnDefs: [
       { "type": "html-input", "targets": [0, 3] }
    ] 
});

fiddle

更新

您可以将其扩展为选择或任何您喜欢的内容

fiddle for selects aswell

如果要添加要检查的其他类型的值，只需选择元素并将要检查的属性添加到all_values

all_values <-- (existing filled with input values for example)

// Search in image titles
var elements = $(el).find('img[title]');
elements.each( function( i, e) {
    all_values += $(e).attr('title');
} );

// Search in Link hrefs
var elements = $(el).find('a[href]');
elements.each( function( i, e) {
    all_values += $(e).attr('href');
} );

// etc ...

【讨论】：

谢谢，这里有一个问题。我们缺少Select（下拉）字段。但是，我们不能对var inputsSelect = $(el).find('select[value]'); 做类似的事情，因为 Select 的 Value 不是直接在标签中，而是在 Option 上。我正在研究解决方案，但如果您找到了也请告诉我。
还有一个问题。使用 Selects，如果我要按值搜索，通常它是不相关的和隐藏的，我应该按文本搜索。我将合并这两个 Select 问题。
谢谢。我根据您的帖子提出了以下解决方案。

【解决方案2】：

基于 Pilan 的回答 (JQuery DataTables Search within Input/Select With Complex DOM Structure)，但进行了一些额外的调整，并且还进行了重构以允许搜索和排序，这是最终答案。

策略：首先定义一个实用函数，它为给定的 TD 单元返回一个“代表字符串”。然后，在搜索和排序中使用它，以支持这两种操作。

// Define the custom utility function that brings back a "Representative String" for a TD for DataTables' Search & Sort
function getRepresentativeStringForTDContent(el) {

    // Will store concenatenated string for this TD cell
    var all_search_values = "";

    // NOTE: "el" is the content of TD, which could be either 
    //      (1) input field(s) themselves -- one or multiple, or 
    //      (2) wrapping element(s) in which we need to find() -- one or multiple
    $(el).each(function (index) {
        var inputsInput = $(this).is('input') ? $(this) : $(this).find('input');
        var inputsSelect = $(this).is('select') ? $(this) : $(this).find('select');

        inputsInput.each( function( i, e) {
            // Text Inputs added by value
            all_search_values += $(e).val();
        });
        inputsSelect.each( function( i, e) {
            // Select Inputs added by Selected Option text (not value)
            all_search_values += $(e).find('option:selected').text(); 
        });    

    });

    return all_search_values;   
}

现在，自定义的数据表搜索（和排序）将使用这个代表值，如下所示：

1.搜索

// Define the DataTable custom Search function for Input/Select fields
$.fn.dataTableExt.ofnSearch['html-input'] = function(el) {
    return getRepresentativeStringForTDContent(el);
};

2。排序

 // Define the DataTable custom Sort function for Input/Select fields
    $.fn.dataTable.ext.order['html-input'] = function  ( settings, col )
    {
        return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
            return getRepresentativeStringForTDContent($(td).html());
        });
    };

将 2 个自定义的搜索和排序功能应用于 DataTable：

// DataTable creation
var table = $("#exampleTable").DataTable({
    columnDefs: [
       { "type": "html-input", "targets": [3, 4, 5] },  // Search Logic
       { "orderDataType": "html-input", type: "string", "targets": [3, 4, 5] }  // Sort Logic
    ] 
});

【讨论】：