javascript - DataTables 按组搜索和过滤？

Question

我正在使用 DataTables，我也在对表格进行分组。第一列是ID，可以忽略。我正在使用选择输入让用户可以过滤表格。

但是，因为没有人需要按 id 进行过滤，所以我想让用户也可以按组进行过滤。这意味着我必须用组替换 id 选择输入的选项值，并在选择 id 列上的下拉列表时过滤组而不是 id。

我希望你们明白我的意思。我只想用可用的组替换第一个选择选项值，并提供按组过滤的可能性。

这是我的表格的一个例子:

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();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">


<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>

亲切的问候和谢谢!

Answer 1

您需要先确定分组列的索引，然后将值附加到 ID 列，与按组过滤一样，您需要它的索引。

要更新选择选项，您需要使用 search API 然后在 draw 事件中，清空选择选项值，然后将其附加到过滤后的值。

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() {
      var table = this;
      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()
            );
            if (column.index() === 0) {
              column.column([1]).search(val ? '^' + val + '$' : '', true, false)
                .draw()
            } else {
              console.log(column)
              column
                .search(val ? '^' + val + '$' : '', true, false)
                .draw();
            }

          });

        if (column.index() === 0) {
          this.column([1]).data().unique().sort().each(function(d, j) {
            select.append('<option value="' + d + '">' + d + '</option>')
          }); //column.data
        } else {
          column.data().unique().sort().each(function(d, j) {
            select.append('<option value="' + d + '">' + d + '</option>')
          }); //column.data
        }
      });
    },
  });
  table.on('draw', function() {
    table.columns().indexes().each(function(idx) {
      var select = $(table.column(idx).footer()).find('select');
      if (select.val() === '' && idx !== 0) {
        select
          .empty()
          .append('<option value=""/>');
        table.column(idx, {
          search: 'applied'
        }).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();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">


<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>