使用复选框过滤数据表

Question

我想使用复选框在 DataTables 中进行过滤，但我不知道该怎么做。格式数据为json。

我只想过滤大于 27 的温度，例如通过单击复选框。

var data = [
 {temperature: 20, date: "01/07/2018"},
 {temperature: 27, date: '02/07/2018'},
 {temperature: 25, date: '03/07/2018'},
 {temperature: 27, date: '04/07/2018'},
 {temperature: 23, date: '05/07/2018'},
 {temperature: 24, date: '06/07/2018'},
 {temperature: 23.5, date: '07/07/2018'},
 {temperature: 27, date: '08/07/2018'},
 {temperature: 30, date: '09/07/2018'},
 {temperature: 28, date: '10/07/2018'},
 {temperature: 27, date: '11/07/2018'},
 {temperature: 28.1, date: '12/07/2018'},
 {temperature: 26, date: '13/07/2018'},
 {temperature: 22, date: '14/07/2018'}
]
var table = null

$(document).ready( function(){
   fillTable()
} )

function fillTable() {
     var line = ""     
     $.each(data, (i, j) => {

       line += "<tr>"+
               "   <td>"+j.temperature+"</td>"+
               "   <td>"+j.date+"</td>"+
               "</tr>"
     })
     var tbody = $('.tbodyTemp')
     tbody.find('tr').remove()
     tbody.append( line )
     paggingTable()

}

var paggingTable = () => {
  table =  $('#example2').DataTable()
}

  $('#maxTemp27').on('change', function () {
        if( $(this).is(':checked') ){
           // console.log( 'Está checado' )
         $.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) {
          var checked = $('#checkbox').is(':checked');

          if (checked && aData[4] > 27) {
              return true;
          }
          if (!checked && aData[4] < 27) {
              return true;
          }
          return false;
      });
      table.draw()
        }else{
        table.draw()
          //  console.log( 'Não está checado' )
        }
    })

<label>
 <input type="checkbox" id="maxTemp27"> Bigger then 27
</label>

<table id="example2" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Temperature</th>
      <th>Date</th>
    </tr>
  </thead>
 <tbody class="tbodyTemp">

  </tbody>
  <tfoot>
    <tr>
       <th>Temperature</th>
       <th>Date</th>
    </tr>
  </tfoot>
</table>

我试过这个答案here，但它不起作用。

Answer 1

首先，为什么不使用data 选项而不是手动构建标记？

var table = $('#example').DataTable({
  data: data,
  columns: [
    { data: 'temperature', title: 'temperature' },
    { data: 'date', title: 'date' }
  ]  
})  

...速度更快，维护更友好。您可以在空的 <table> 元素上执行此操作，并根据需要添加 <tfoot>（也可以手动添加 <thead>）。

其次，我相信$.fn.dataTableExt.afnFiltering 是遗留代码，即 1.10.x 之前的旧方式。它仍然适用于向后兼容，但“现代”自定义过滤器数组称为$.fn.dataTable.ext.search。不过，这里的问题是使用了错误的索引和一些没有加起来的逻辑。改为这样做：

$('#maxTemp27').on('change', function() {
  if ($(this).is(':checked')) {
    $.fn.dataTable.ext.search.push(
      function(settings, data, dataIndex) {  
         return data[0] > 27
      }
    )
  } else {
    $.fn.dataTable.ext.search.pop()
  }
  table.draw()
})

您不必检查多次检查（您已经知道），或返回不同的值 - 只需将值作为表达式比较一次，并使用正确的索引。如果未选中复选框，请使用 pop() 删除过滤器。

看看它在这里工作 -> http://jsfiddle.net/zyhvxc65/