时间戳

首页 > 解决方案 > 排除特定类的搜索过滤器的数据表

jquery - 排除特定类的搜索过滤器的数据表

问题描述

我有一个 HTML 表格，实际上我的网站上有更多表格。所以我创建了一个名为 的类datatable，它涵盖了我的大部分通用表需求。对于导出，如 PDF 和 Excel，我设法排除了带有 class 的列ignore。

我想ignore动态排除带有类的列。我希望能够在类中设置更多列，ignore并避免过滤器通过这些列。不一定会有 a buttonora元素，所以请避免暗示我只是排除这些。

在特定情况下，我有一个 name 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>

标签： jquerydatatables

解决方案

你可以加：

  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)',
    }

推荐阅读