Question

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

Ex：假设我有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'
        ]
    } );

在数据表上我有Action字段，包括Edit和Delete Button。有什么办法可以从列可见性，打印和下载按钮选项中删除动作过滤器吗？

希望我已经解释过了。如果有人可以指导我那会很棒。

提前致谢。

Answer 1

要进行操作，colvis按钮需要以下内容：

按钮＆＃39;列可见性按钮插件

确保您已引用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
}

示例演示

＆＃13;

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

＆＃13;

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

＆＃13;

Data table colvis reference

自定义数据表

1 个答案: