Задать вопрос
@NikitaWeb

Как создать на ajax Выпадающий список для фильтрации по колонкам в Datatable?

Я бы хотел отобразить результат с помощью раскрывающегося фильтра столбца. Но после выбора таблицы результат не обновляется. Моя основная цель - фильтровать по столбцу "Компания", и этот селектор должен быть в верхней части таблицы.
$(document).ready(function() {
  var exampleDataTable = $('#example').DataTable({
    responsive: true,
    colReorder: true,
    dom: 'Bfrtip',
    buttons: [
      {
            extend: 'excel',
            exportOptions: {
                columns: ':visible'
            }
        },
        'colvis'
    ],
    language: {
      buttons: {
                  colvis: 'Отображение столбцов'
                },
                "processing": "Подождите...",
                "search": "Поиск:",
                "lengthMenu": " _MENU_ ",
                "info": "Показано с _START_ до _END_ записей из _TOTAL_",
                "infoEmpty": "Записи с 0 до 0 из 0 записей",
                "infoFiltered": "(отфильтровано из _MAX_ записей)",
                "infoPostFix": "",
                "loadingRecords": "Загрузка записей...",
                "zeroRecords": "Записи отсутствуют.",
                "emptyTable": "В таблице отсутствуют данные",
                "paginate": {
                "first": "Первая",
                "previous": "<",
                "next": ">",
                "last": "Последняя"
                },
                "aria": {
                "sortAscending": ": активировать для сортировки столбца по возрастанию",
                "sortDescending": ": активировать для сортировки столбца по убыванию"
                }
            },
            "iDisplayLength": 10,
            "aLengthMenu": [[ 3, 10, 20, 50, 100 ,-1],[ 3, 10,20,50,100,"все"]],
    stateSave: true,
    "fnCreatedRow": function(nRow, aData, iDataIndex) {
      $(nRow).attr('id', aData[0]);
    },
    'serverSide': 'true',
    'processing': 'true',
    'paging': 'true',
    'order': [],
    'ajax': {
      'url': 'fetch_data.php',
      'type': 'post',
      'data': {
        from_attr_1_l: from_attr_1_l,
        from_attr_2_l: from_attr_2_l
      },
    },
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>')
    });
  });
}  }); });

<div class="container-fluid">
<div class="row">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <table id="example" class="table">
          <thead>
            <th>Id</th>
            <th>Номер</th>
            <th>ФИО</th>
            <th>Дата</th>
            <th>Срок</th>
            <th>Кол-во мест</th>
            <th>Метка</th>
            <th>ИНН</th>
            <th>Телефон</th>
            <th>КПП</th>
            <th>Компания</th>
            <th>Адрес</th>
            <th>Email</th>
            <th>Ответственный</th>
            <th>Партнер</th>
            <th>К. телефон</th>
            <th>К. email</th>
            <th></th>
          </thead>
          <tbody>
          </tbody>
          <tfoot>
          <tr>
          <th>Id</th>
            <th>Номер</th>
            <th>ФИО</th>
            <th>Дата</th>
            <th>Срок</th>
            <th>Кол-во мест</th>
            <th>Метка</th>
            <th>ИНН</th>
            <th>Телефон</th>
            <th>КПП</th>
            <th>Компания</th>
            <th>Адрес</th>
            <th>Email</th>
            <th>Ответственный</th>
            <th>Партнер</th>
            <th>К. телефон</th>
            <th>К. email</th>
            <th></th>
        </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</div>
  </div>

Я также использовал разные решения из https://datatables.net/examples/api/multi_filter_s... и https://datatables.net/forums/discussion/73081/sel... , но это не сработало.
  • Вопрос задан
  • 128 просмотров
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы