代码之家 › 专栏 › 技术社区 › gene b.

jquery数据表在具有复杂dom结构的输入/选择中搜索

datatables jquery

0

gene b. · 技术社区 · 8 年前

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

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/

我在小提琴上做了一个叉子,在那里我把dom改成如下:

名字 :包裹在 <DIV> ,并在同一单元格中添加第二个输入。搜索应该同时适用于这两种情况。
年龄 :包裹在 <DIV & GT;

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

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

实际上,当我加上一个 <DIV & GT; 包装器,所以即使是一个小的修改(没有任何新控件)也不起作用。

2 回复 | 直到 8 年前

1

SirPilan 8 年前

试着得到一个 “总价值”

$.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

更新

你可以把这个扩展为select,或者你喜欢的任何东西

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 ...

2

0

gene b. 8 年前

基于皮兰的答案( 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;   
}

现在,定制的DATABATE搜索(和排序)将使用该代表值如下:

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