Filter in DataTable with Checkbox

//https://github.com/cbcarlos07

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' )
        }
    })

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script><scriptsrc="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>


<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script><label><inputtype="checkbox" id="maxTemp27"> Maior que 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>