自定义数据表

Question

我目前正在处理数据表，我需要自定义模板提供的一些数据表功能。 我正在尝试将列可见性功能与所有列一起分配给数据表，但默认情况下，某些字段应该在数据表上。

例如：假设我有 5 列 [姓名、地址、年龄、电子邮件、电话]。但默认情况下，数据表应仅显示 [姓名、电子邮件、电话] 字段。但列可见性应显示所有 5 个字段。我不确定它是否可能。 这是我到目前为止所做的。

var table = $('#data-table').DataTable( {
        destroy: true,
        dom: 'lBfrtip',
        "bFilter": true,
        "aLengthMenu": [[5, 10, 15, 20, 50, 100, -1], [5, 10, 15, 20, 50, 100, "All"]],
        "buttons": [
            {
                extend: 'copyHtml5',
                exportOptions: {
                    columns: [ 0, ':visible' ]
                }
            },
            {
                extend: 'excelHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'pdfHtml5',
                exportOptions: {
                    columns: [ 0, 1, 2, 5 ]
                }
            },
            {
                extend: 'colvis',
                postfixButtons: ['colvisRestore'],
            },
            'print'
        ]
    } );

在数据表上，我有包含编辑和删除按钮的操作字段。有什么方法可以从列可见性、打印和下载按钮选项中删除操作过滤器？

希望我已经解释过了。如果有人可以指导我，那就太好了。

提前致谢。

Answer 1

为了操作，colvis 按钮需要以下内容：

Buttons' Column 可见性按钮插件

确保您引用了colvis 插件JS。

如果您想在加载时隐藏几列。

table.column(3).visible(false, false);

如果您希望只有特定的列可以在colvis 中可见的集合中

{
extend: 'colvis',
columns: [0, 1, 2, 3], // These are columns can be set visibility, others will be always visible
}

示例演示

$(function() {
  var table = $('#example').DataTable({
    destroy: true,
    dom: 'lBfrtip',
    "bFilter": true,
    "aLengthMenu": [
      [5, 10, 15, 20, 50, 100, -1],
      [5, 10, 15, 20, 50, 100, "All"]
    ],
    "buttons": [{
        extend: 'copyHtml5',
        exportOptions: {
          columns: [0, ':visible']
        }
      }, {
        extend: 'excelHtml5',
        exportOptions: {
          columns: ':visible'
        }
      }, {
        extend: 'pdfHtml5',
        exportOptions: {
          columns: [0, 1, 2, 5]
        }
      }, {
        extend: 'colvis',
        columns: [0, 1, 2, 3], // These are columns can be set visiblity, others will be always visible
        postfixButtons: ['colvisRestore'],
      },
      'print'
    ]
  });

  // Initially this will hide 4th column
  table.column(3).visible(false, false);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/s/bs/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,b-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,fh-3.1.0,sc-1.4.0/datatables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.colVis.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/bs/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,b-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,fh-3.1.0,sc-1.4.0/datatables.min.css">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">


<div class="container">
  <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
    <thead>
      <tr>
        <th>name</th>
        <th>address</th>
        <th>age</th>
        <th>email </th>
        <th>phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Trident</td>
        <td>Internet Explorer 4.0</td>
        <td>Win 95+</td>
        <td> 4</td>
        <td>X</td>
      </tr>
      <tr>
        <td>Trident</td>
        <td>Internet Explorer 5.0</td>
        <td>Win 95+</td>
        <td>5</td>
        <td>C</td>
      </tr>
      <tr>
        <td>Trident</td>
        <td>Internet Explorer 5.5</td>
        <td>Win 95+</td>
        <td>5.5</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Trident</td>
        <td>Internet Explorer 6</td>
        <td>Win 98+</td>
        <td>6</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Trident</td>
        <td>Internet Explorer 7</td>
        <td>Win XP SP2+</td>
        <td>7</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Trident</td>
        <td>AOL browser (AOL desktop)</td>
        <td>Win XP</td>
        <td>6</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Gecko</td>
        <td>Firefox 1.0</td>
        <td>Win 98+ / OSX.2+</td>
        <td>1.7</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Gecko</td>
        <td>Firefox 1.5</td>
        <td>Win 98+ / OSX.2+</td>
        <td>1.8</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Gecko</td>
        <td>Firefox 2.0</td>
        <td>Win 98+ / OSX.2+</td>
        <td>1.8</td>
        <td>A</td>
      </tr>

      <tr>
        <td>Other browsers</td>
        <td>All others</td>
        <td>-</td>
        <td>-</td>
        <td>U</td>
      </tr>
    </tbody>
  </table>
</div>

Data table colvis reference