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

Question

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

在输入中搜索JQuery数据并选择

使用数据表在输入标记中搜索

我有一个由输入字段、文本/选择输入组成的DataTable。为了在它们中启用搜索功能，我知道我可以做到

$.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上做了一个叉子，在那里我更改了DOM，如下所示：

• 名称：包装在<DIV>中，并在同一单元格中添加第二个输入。搜索应同时适用于两者。
• Age：封装在<DIV>中

新Fiddle：https://jsfiddle.net/9vL1yukp/1/

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

实际上，当我只添加了一个<DIV>包装器时，它就不起作用了，所以即使是一个小的修改(没有任何新的控件)也不能工作。

Answer 1

基于Pilan的答案(具有复杂DOM结构的输入/选择中的JQuery DataTables搜索)，但经过一些额外的调整，以及允许搜索和排序的重构，这是最后的答案。

策略:首先定义一个实用程序函数，该函数返回给定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;   
}

现在，定制的DataTable搜索(和排序)将使用这个代表值，如下所示：

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
    ] 
});

Answer 2

尝试获得一个“总价值”

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

小提琴

更新

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

也可供挑选之用

如果要添加另一种类型的值，只需选择元素并将要检查的属性添加到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 ...