DataTables search and filter by group?

FrazeColder

I am using DataTables and I am grouping the table as well. The first column is and ID which can be neglected. I am using select inputs to give the users the possibility to filter the table.

However, cause nobody needs to filter by the id I want to give the users the possibility to filter also by the groups. That means I have to replace the option values of the id select input with the groups and filter the groups instead of the ids when select the dropdown on the id column.

I hope you guys got me. I just want to replace the first select option values with the available groups and give the possibility to filter by groups as well.

Here is an example of my table:

var table;
var groupColumn = 1;

$(document).ready(function() {

  table = $('#contact_overview_table').DataTable({
    "displayStart": 0,
    "language": {
      "url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/German.json"
    },
    "columnDefs": [{
      "visible": false,
      "targets": groupColumn
    }],
    "order": [
      [groupColumn, 'asc']
    ],
    "processing": true,
    "pageLength": 25,
    "drawCallback": function(settings) {
      var api = this.api();
      var rows = api.rows({
        page: 'current'
      }).nodes();
      var last = null;

      api.column(groupColumn, {
        page: 'current'
      }).data().each(function(group, i) {
        if (last !== group) {
          $(rows).eq(i).before(
            '<tr class="group"><td colspan="15" style="font-weight: bold;">' + group + '</td></tr>'
          );

          last = group;
        }
      });
    },
    initComplete: function() {
      this.api().columns().every(function() {
        var column = this;
        var select = $('<select><option value=""></option></select>')
          .appendTo($(column.footer()).empty())
          .on('change', function() {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );

            column
              .search(val ? '^' + val + '$' : '', true, false)
              .draw();
          });

        column.data().unique().sort().each(function(d, j) {
          select.append('<option value="' + d + '">' + d + '</option>')
        });
      });
    },
  });

  // Order by the grouping
  $('#contact_overview_table tbody').on('click', 'tr.group', function() {
    var currentOrder = table.order()[0];
    if (currentOrder[0] === groupColumn && currentOrder[1] === 'asc') {
      table.order([groupColumn, 'desc']).draw();
    } else {
      table.order([groupColumn, 'asc']).draw();
    }
  });
});

<div id="contact_overview_table_div" class="table-responsive">
  <table class="table table-striped table-bordered" id="contact_overview_table">
    <thead>
      <tr>
        <th class="text-center">ID</th>
        <th class="text-center">Art</th>
        <th class="text-center">Anrede</th>
        <th class="text-center">Titel</th>
        <th class="text-center">Vorname</th>
        <th class="text-center">Name</th>
        <th class="text-center">Firma</th>
        <th class="text-center">Straße</th>
        <th class="text-center">Ort</th>
        <th class="text-center">Mobil</th>
        <th class="text-center">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <th>Customer</th>
        <th></th>
        <th>Porf</th>
        <th>Max</th>
        <th>Müller</th>
        <th></th>
        <th></th>
        <th>Berlin</th>
        <th>+21 431 8912</th>
        <th class="text-center">Actions</th>
      </tr>

      <tr>
        <th>2</th>
        <th>Customer</th>
        <th></th>
        <th></th>
        <th>Tim</th>
        <th>See</th>
        <th></th>
        <th></th>
        <th>Stockholm</th>
        <th>+44 123 5763</th>
        <th class="text-center">Actions</th>
      </tr>

      <tr>
        <th>1</th>
        <th>Supplier</th>
        <th></th>
        <th>Dr</th>
        <th>Philipp</th>
        <th></th>
        <th></th>
        <th></th>
        <th>New York</th>
        <th>+49 241 4513</th>
        <th class="text-center">Actions</th>
      </tr>

      <tr>
        <th>2</th>
        <th>Supplier</th>
        <th></th>
        <th></th>
        <th>Max</th>
        <th>Hue</th>
        <th></th>
        <th></th>
        <th>Los Angelas</th>
        <th>+44 124 1341</th>
        <th class="text-center">Actions</th>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th class="text-center">ID</th>
        <th class="text-center">Art</th>
        <th class="text-center">Anrede</th>
        <th class="text-center">Titel</th>
        <th class="text-center">Vorname</th>
        <th class="text-center">Name</th>
        <th class="text-center">Firma</th>
        <th class="text-center">Straße</th>
        <th class="text-center">Ort</th>
        <th class="text-center">Mobil</th>
        <th class="text-center tfoot-hide-select">Actions</th>
      </tr>
    </tfoot>
  </table>

colin

Hi @FrazeColder ,

That's a lot of code. We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

FrazeColder

Here you can find a running example:

https://jsfiddle.net/w7u4rhtp/

colin

Hi @FrazeColder ,

Not sure if you're aware, but there's the RowGroup extension that'll do pretty much what you want - here's an one of the examples of it.

I modified your example here - the code is repetitive so could be refactored, but I think it does what you're after,

Cheers,

Colin