13

DataTables 搜索栏不允许我在子行中搜索内容。

我已经广泛搜索以找到这个问题的答案（1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9），但对这个问题几乎没有回应。

这是一个简单的jsfiddle和DataTables 调试器结果。

我想在表格中搜索分机号码（位于子行中），但在搜索栏中键入分机号码之一不会留下任何搜索结果。

我通过添加以下内容尝试了这篇文章的解决方案：

table.columns().every( function () {
    var that = this;
    var header = this.header();

    $( 'input', this.footer() ).on( 'keyup change', function () {
        that
        .column( header.getAttribute('data-search-index')*1 ) // *1 to make it a number
        .search( this.value )
        .draw();
    } );
} );

...但它仍然不起作用，正如您在上面链接的 jsfiddle中看到的那样。

有人可以帮我吗？

谢谢

4

4 回答 4

14

解决方案

为了让 jQuery DataTables 搜索子行，您需要将子行中显示的数据作为隐藏列添加到主表中。

例如，您可以使用如下所示的选项为extn数据属性添加隐藏列：columns.visible

JavaScript：

    "columns": [
        {
            "class":          'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "name" },
        { "data": "position" },
        { "data": "office" },
        { "data": "salary" },
        { "data": "extn", "visible": false }            
    ],

HTML：

<thead>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
        <th>Extn.</th>
    </tr>
</thead>

演示

有关代码和演示，请参阅此 jsFiddle。搜索5407并显示第一行，即使数据仅出现在子行中。

于 2015-10-23T02:36:38.920 回答
3

我不得不问：是什么让您相信只有在显示子行时才能在动态注入的子行内容中进行搜索？搜索应该如何column()覆盖其他行的内容？

话虽如此，当然有一种解决方法。不要一遍又一遍地创建子行内容，而是将其保存在数组中：

var details = [];

现在，当您初始化表格时，您也会初始化子行内容：

...
columns: [{
   className: 'details-control',
   orderable: false,
   data: null,
   defaultContent: '',
   render: function(data, type, row, meta) {  
      details[meta.row] = format(data);
   }    
}, 
...

在 format() 函数中，为 Extension Number 字段添加一个类以便于访问：

'<td class="extNo">' + d.extn + '</td>' +

当您显示子行时，插入预呈现的内容details[]而不是调用format()：

if (row.child.isShown()) {
   row.child.hide();
   tr.removeClass('shown');
} else {
   row.child(details[row.index()]).show();            
   tr.addClass('shown');
}

创建一个过滤器，该过滤器仅返回具有包含details[]某个 Extension Number 的子行的行：

function filterByDetailsExtNo(extNo) {
    $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
       return $(details[dataIndex]).find('.extNo').text() == extNo;
    }    
  )
  table.draw();
  $.fn.dataTable.ext.search.pop();
}

使用该自定义过滤器而不是column()输入处理程序中的搜索：

table.columns().every( function () {
    $( 'input', this.footer() ).on( 'keyup change', function () {
        filterByDetailsExtNo(this.value);
    });
});

分叉的小提琴-> https://jsfiddle.net/7o67vhrz/

更新。要将上述过滤器应用于一般搜索框：

$('.dataTables_filter input')
   .off()
   .on('keyup', function() {
      filterByDetailsExtNo(this.value);
   });

又一个分叉的小提琴-> https://jsfiddle.net/ds3qp41g/

最后一个例子。结合详细信息搜索和“本机”搜索

function filterByDetailsExtNoAndInput(term) {
      $.fn.dataTable.ext.search.push(
        function(settings, data, dataIndex) {
            if ($(details[dataIndex]).find('.extNo').text() == term) return true;
            for (var i=0;i<data.length;i++) {
                if (data[i].toLowerCase().indexOf(term.toLowerCase())>=0) {
                    return true
                }    
            }   
            return false;
        }    
      )
      table.draw();
      $.fn.dataTable.ext.search.pop();
    }

小提琴-> https://jsfiddle.net/h2u4fowj/

于 2015-05-27T07:45:12.340 回答
1

这是一个相当古老的线程，并且接受的答案确实有效，但我想提出一个替代解决方案。

我遇到了同样的问题，无法在子行中搜索，我的解决方案是在<td>包含子行中的数据的表的末尾隐藏 - 这样，索引器会看到它，但用户没有.

对于有限的 HTML，我添加了一个新列：

<th class="hidden">Data</th>

然后，在 DataTables 调用中：

//Within var table = $('#table').DataTable( {....
columns : [
        //{ className : 'details-control'},
        { data : 'a' }, //a-e are the columns I want the user to see.
        { data : 'b' },
        { data : 'c' },
        { data : 'd' },
        { data : 'e' },            
        // this last one is my "index helper"
        { data : 'comments',
          render : function(data, type, full, meta) {
            return full.f + full.g + full.h + full.i;
          }
         }
    ],

然后，您只需要隐藏此列。您可以通过 DataTables 推荐的方法来做到这一点：

https://datatables.net/examples/basic_init/hidden_​​columns.html

或通过我选择的方法：

"createdRow" : function (row,data,index) {
    $('td',row).eq(6).addClass('hidden');
}

//and the css...
.hidden {
 visibility: hidden;
}

您在<td>表的末尾留下一个包含子行的所有内容，但它是不可见的，它适用于搜索框/过滤器。

于 2015-08-31T15:32:37.847 回答
0

如果您在一列中有扩展名列表，那么您希望像这样拆分它们。

              {"data": "extn", "visible": false,
               "render": function (data, type, row, meta) {

                        var htmlDetail = '';                            
                        yourList.forEach(function (item) {
                            htmlDetail += item.extn + '|';
                        });
                        return type === 'display' ? htmlDetail : htmlDetail;
              }
于 2019-12-18T12:54:08.807 回答