将列搜索应用于当前的jQuery DataTable [英] Apply column search to current jQuery DataTable

问题描述

我有一个当前运行正常的jQuery DataTable:

I have a current jQuery DataTable in place that is functioning properly:

 var $dataTable = $('#example1').DataTable({
   "ajax": 'api/tableSearch.php',
   "iDisplayLength": 25,
   "order": [[ 6, "desc" ]],
   "scrollY": 600,
   "scrollX": true,
   "bDestroy": true,
   "columnDefs": [{
     "targets": 0,
     "render": function (data, type, full, meta){
       return '<a class="editLink" href="#">Edit</a><a class="deleteLink" href="#">Del</a>':
     }
   }]
 });

如上所述，以上代码可以正常工作...搜索过滤器有效，排序有效，一切正常.

As stated, the above code works accordingly...the search filter works, the sorting works, everything works.

我想做的是向此数据表添加列搜索，如下所示:
https://www.datatables.net/release-datatables/examples/api/multi_filter_select.html

What I would like to do is add a column search to this datatable, as shown here:
https://www.datatables.net/release-datatables/examples/api/multi_filter_select.html

我尝试将上述链接中的代码添加到当前代码中，如下所示:

I attempted to add the code from the link above to my current code, as follows:

 var $dataTable = $('#example1').DataTable({
   "ajax": 'api/tableSearch.php',
   "iDisplayLength": 25,
   "order": [[ 6, "desc" ]],
   "scrollY": 600,
   "scrollX": true,
   "bDestroy": true,
   "columnDefs": [{
     "targets": 0,
     "render": function (data, type, full, meta){
       return '<a class="editLink" href="#">Edit</a><a class="deleteLink" href="#">Del</a>':
     }
   }],  // begin here
   initComplete: function(){
     this.api().columns().every(function(){
       var column = this;
       var select = $('<select><option value=""></option></select>')
       .appendTo( $(column.footer()).empty() )
       .on( 'change', function () {
         var val = $.fn.dataTable.util.escapeRegex(
            $(this).val()
           );
         column
           .search( val ? '^'+val+'$' : '', true, false )
           .draw();
         } );
         column.data().unique().sort().each( function ( d, j ) {
           select.append( '<option value="'+d+'">'+d+'</option>' )
         } );
        } );
      }
    } );        
 });     

我没有收到任何错误，并且DataTable仍然加载，但是没有列搜索.

I have not received any errors, and the DataTable still loads, but the column search is not there.

我正在使用jQuery-2.1.3.min，因此它应该是最新的.

I am using jQuery-2.1.3.min, so it should be up to date.

有人看到我在做什么错了，我可以做些什么来纠正这个问题?

Does anyone see what I am doing wrong and what I can do to correct this issue?

推荐答案

向表中添加<tfoot>.引用column.footer()的表达式期望它存在.

Add a <tfoot> to your table. The expression referencing column.footer() expects it to exist.

这篇关于将列搜索应用于当前的jQuery DataTable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！