Возможность обработки данных с исключением в поисковом фильтре с определенным классом - PullRequest
0 голосов
/ 26 ноября 2018

У меня есть таблица HTML, фактически у меня есть больше таблиц на моем сайте.Поэтому я создал класс с именем datatable, который покрывает большинство моих потребностей в общих таблицах.Для экспорта, как PDF и Excel, мне удалось исключить столбец с классом ignore.

Я хочу динамически исключить столбец с классом ignore.Я хочу иметь возможность устанавливать больше столбцов с классом ignore и избегать фильтра, проходящего через эти столбцы.Не обязательно, что будут элементы button или a, поэтому, пожалуйста, не предлагайте мне просто исключить их.

В конкретном случае у меня есть имя Edit Valvasor, и я хочуфильтр, чтобы найти строку, когда я набираю "Edit" в фильтре и игнорирую столбцы с Edit buttons.

Пример можно найти здесь: http://jsfiddle.net/t1h9ugqa/

Javascript:

$(document).ready(function() {
  $('.datatable').DataTable({
    lengthMenu: [
      [15, 25, 50, -1],
      [15, 25, 50, "All"]
    ],
    pageLength: 25,
    dom: '<"html5buttons"B>lTfgitp',
    aaSorting: [],
    buttons: [{
        extend: 'copy',
        exportOptions: {
          columns: ':not(.ignore)',
        }
      },
      {
        extend: 'csv',
        exportOptions: {
          columns: ':not(.ignore)',
        }
      },
      {
        extend: 'excel',
        exportOptions: {
          columns: ':not(.ignore)',
        }
      },
      {
        extend: 'pdf',
        exportOptions: {
          columns: ':not(.ignore)',
        }
      },
      {
        extend: 'print',
        customize: function(win) {
          $(win.document.body).addClass('white-bg');
          $(win.document.body).css('font-size', '10px');

          $(win.document.body).find('table')
            .addClass('compact')
            .css('font-size', 'inherit');
        }
      }
    ]
  });
});

HTML:

<table class="datatable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Sum</th>
      <th class="ignore"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Edit Valvasor</td>
      <td>1034</td>
      <td>
        <a class="btn btn-primary" href="#">Edit</a>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Samuel Grixis</td>
      <td>655</td>
      <td>
        <a class="btn btn-primary" href="#">Edit</a>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>Martin Kempinsky</td>
      <td>153</td>
      <td>
        <a class="btn btn-primary" href="#">Edit</a>
      </td>
    </tr>
  </tbody>
</table>

1 Ответ

0 голосов
/ 26 ноября 2018

Вы можете добавить:

  columnDefs: [
        { searchable: false, targets: 3 }
    ],

код в примере выглядит так: // target - номер столбца

  $('.datatable').DataTable({
lengthMenu: [
  [15, 25, 50, -1],
  [15, 25, 50, "All"]
],columnDefs: [
        { searchable: false, targets: 3 }
    ],
pageLength: 25,
dom: '<"html5buttons"B>lTfgitp',
aaSorting: [],
buttons: [{
    extend: 'copy',
    exportOptions: {
      columns: ':not(.ignore)',
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...