DataTables.net with filtering checkboxes

Jquery DataTables.net Top 5 players without Names and Photos

by Alexander Farber

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<p align="center">Show user ids:
  <label><input type="checkbox" id="below" checked>Below 10k</label>
  <label><input type="checkbox" id="middle" checked>10k - 20k</label>
  <label><input type="checkbox" id="above" checked>Above 20k</label>
</p>

<table id="topTable" class="stripe">
  <thead>
    <tr>
      <th>Elo</th>
      <th>User id</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

CSS

td.details-control {
  cursor: pointer;
}

span.xlarge {
  font-size: x-large;
}

JavaScript

'use strict;'

function renderOpenElo(data, typeStr, row, meta) {
  return typeStr === 'display' ? '<SPAN CLASS="xlarge">&rtri;</SPAN> ' + data : data;
}

function renderAvgData(data) {
  return '<TABLE WIDTH=100%>' +
    '<TR><TH>Average score: ' + data.avg_score + '</TH></TR>' +
    '<TR><TH>Average time: ' + data.avg_time + '</TH></TR></TABLE>';
}

jQuery(function() {
  var topTable = $('#topTable').DataTable({
    ajax: 'https://wordsbyfarber.com/ru/top-5',
    pageLength: 5,
    order: [
      [0, 'desc']
    ],
    columns: [{
        data: 'elo',
        searchable: false,
        className: 'details-control',
        render: renderOpenElo
      },
      {
        data: 'uid',
        className: 'dt-right'
      }
    ]
  });

  $('#topTable tbody').on('click', 'td.details-control', function() {
    var span = $(this).find('span').first();
    var tr = $(this).closest('tr');
    var row = topTable.row(tr);

    if (row.child.isShown()) {
      row.child.hide();
      span.html('&rtri;');
    } else {
      row.child(renderAvgData(row.data())).show();
      span.html('&dtri;');
    }
  });

  $('#below,#middle,#above').click(function() {
    topTable.draw();
  });

  $.fn.dataTableExt.afnFiltering.push(
    function(oSettings, aData, iDataIndex, row) {
      if ('topTable' == oSettings.nTable.id) {
        console.log(row);

        if (row.uid < 10000) {
          return $('#below').is(':checked');
        }

        if (10000 < row.uid && row.uid < 20000) {
          return $('#middle').is(':checked');
        }

        return $('#above').is(':checked');
      }

      return true;
    }
  );
});