Filter in DataTables by using checkbox

Question

I want use a checkbox to filter in DataTables, but I don't know how to do it. The format data is json.

I want to filter only temperatures larger than 27, for example by clicking on a checkbox.

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>

I have tried this answer here, but it doesn't work.

davidkonrad · Accepted Answer · 2018-07-27 19:45:14Z

4

First of all, why not use the data option instead of building the markup manually?

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

...Is faster and more maintenance friendly. You can do that on an empty <table> element and add a <tfoot> if you want (and a <thead> by hand as well).

Second I believe $.fn.dataTableExt.afnFiltering is legacy code, i.e the old way prior to 1.10.x. It still work for backward compatibility but the "modern" custom filter array is called $.fn.dataTable.ext.search. Though, your problem here is the use of bad indexes and some logic that not add up. Do this instead :

$('#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()
})

You do not have to examinate checked multiple times (you know that already), or return different values - just compare the value once as an expression, and use the correct index. If the checkbox not is checked, remove the filter by using pop().

See it working here -> http://jsfiddle.net/zyhvxc65/

answered Jul 27, 2018 at 19:45

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

D Durham Over a year ago

This would work with one filter checkbox, but not multiple. If multiple how would you know which one to 'pop'?

Collectives™ on Stack Overflow

Filter in DataTables by using checkbox

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related