Datatables.net带有colvis按钮的多个表

时间:2019-05-02 13:05:05

标签: datatables

我在项目中使用数据表,我的页面包含3个不同的表。我需要允许每个表的列可见性。问题是,当页面具有多个表时,这根本不起作用。我还有另一页只有一个表,并且相同的代码在这里很完美。我花了一些时间浏览网站的帮助和论坛,但没有提出解决方案。有人知道解决方案吗?

下面是我的代码示例,每个表都有自己的datatable函数并分配给自己的表类,例如dataTable1,dataTable2,dataTable3。因此,每个调用错误表的Init方法都不会引起混淆。是什么导致它在多表页面上失败

function InitDataTable() {    
    $('.dataTable').DataTable({
        "initComplete": function () { },
         fixedHeader: true,
         scrollY: '400px',
         scrollX: true,
         scrollCollapse: true,                          
         "language": { "emptyTable": "" },
         searching: false, 
         paging: false, 
         info: false, 
         "ordering": true,
         "responsive": false,
         dom: 'Bfrtip',
         "autoWidth": true,
         stateSave: true,
         buttons: [
         {
             extend: 'colvisGroup',
             className: 'ResetButton',
             text: 'Reset',
             show: ':hidden'
         },
         {
              extend: 'colvis',
              className: 'ColControl',
              columns: ':not(.noVis)'//,
         },
         {
              extend: 'copyHtml5',
              className: 'btn-copy',
              title: '@Model.ReportName',
              footer: true,
              exportOptions: {
                  columns: ':visible'
              }
         },
         {
              extend: 'excelHtml5', 
              className: 'btn-excel',
              title: '@Model.ReportName',
              footer: true,
              exportOptions: {
                  columns: ':visible'
              }                    
         },
         {
              extend: 'csvHtml5',
              className: 'btn-csv',
              title: '@Model.ReportName',
              footer: true,
              exportOptions: {
                  columns: ':visible'
              }
         },
         {
              extend: 'print',
              className: 'btn-print',
              title: '@Model.ReportName',
              footer: true,
              exportOptions: {
                  columns: ':visible'
              },
             customize: function (win) {
                 var t = $(win.document.body).find('table');
                 t.find('tr').css('font-size', '12px');                      
             }
         }
       ]
  });
}

0 个答案:

没有答案