jQuery Datatables responsive example

by Rajan Paneru

HTML

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css">
<script src="//cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<div class="container">

  <div class="row p-t-15">
    <div class="col-md-12">
      <h4 class="page-title m-l-0">Inventario BCH</h4>
      <table id="BCHtable" class="display" style="width:100%">
        <thead>
          <tr>
            <th>id</th>
            <th>first_name</th>
            <th>last_name</th>
            <th>avatar.</th>
          </tr>
        </thead>

      </table>
    </div>
  </div>
</div>

CSS

table th:nth-child(3),
td:nth-child(3) {
  display: none;
}

JavaScript

$(document).ready(function() {
  var table = $('#BCHtable').DataTable({
    orderCellsTop: true,
    fixedHeader: true,
    dom: 'Bfrtip',
    buttons: [
      'excel', 'pdf'
    ],
    ajax: "https://reqres.in/api/users",
    fixedHeader: true,
    "columns": [{
        "data": "id"
      },
      {
        "data": "first_name"
      },
      {
        "data": "last_name"
      },
      {
        "data": "avatar"
      }
    ],
  });
  $('#BCHtable thead tr').clone(true).appendTo('#BCHtable thead');
  $('#BCHtable thead tr:eq(1) th').each(function(i) {
    var title = $(this).text();
    $(this).html('<input type="text" placeholder="Buscar ' + title + '" />');

    $('input', this).on('keyup change', function() {
      if (table.column(i).search() !== this.value) {
        table
          .column(i)
          .search(this.value)
          .draw();
      }
    });
  });
});