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

首先，为什么不使用[Key] public Guid LocationID { get; set; } = Guid.NewGuid(); public string Description { get; set; } public ICollection<Event> Events {get; set;} modelBuilder.Entity<Event>() .HashMany<Location>(e = > e.Events) .WithRequired(l => l.Location) .WillCascadeOnDelete();选项而不是手动构建标记？

data

...更快，更易于维护。您可以在空的var table = $('#example').DataTable({ data: data, columns: [ { data: 'temperature', title: 'temperature' }, { data: 'date', title: 'date' } ] })元素上执行此操作，并根据需要添加<table>（也可以手动添加<tfoot>）。

第二，我相信<thead>是遗留代码，即1.10.x之前的旧方法。它仍然可以向后兼容，但是“现代”自定义过滤器数组称为$.fn.dataTableExt.afnFiltering。但是，这里的问题是使用错误的索引和一些未加总的逻辑。改为：

$.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() })删除过滤器。

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

使用复选框过滤数据表

1 个答案: