隐藏/显示列后边距数据表自行增加答案

【问题标题】：margin datatable increased by itself after hiding / showing columns隐藏/显示列后边距数据表自行增加
【发布时间】：2021-03-15 03:06:16
【问题描述】：

隐藏/显示列后边距表数据自行增加。

显示/隐藏列之前的此结果。

之后，我显示/隐藏 10++ 次

数据表css设置默认

table.dataTable {
    width: 100%;
    margin: 0 auto;
}

它从 5 开始，每次显示或隐藏都会增加 1。在我多次点击后终于没有人阻止它

我的脚本

var table = $('#table-result').DataTable({
        responsive: true,
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        dom: 'Blfrtip',
        buttons: [          
          {
            extend: 'collection',
            text: 'Export',
            buttons: [
                'copy',
                {
                  extend: 'excel',
                  title: titleExport
                },
                {
                  extend: 'csv',
                  title: titleExport
                },
                {
                  extend: 'pdf',
                  title: titleExport
                }
            ]
          }
        ],
        rowReorder: true,
        columnDefs: [
            { orderable: true, className: 'reorder data-table-custom-font', targets: 0 },
            { orderable: true, className: 'reorder data-table-custom-font', targets: 1 },
            { orderable: false, className: 'data-table-custom-font', targets: '_all' }
        ]
      });

这个脚本显示/隐藏列

  $('button.toggle-vis').on( 'click', function (e) {
            e.preventDefault();           
            // Get the column API object
            let column = table.column( $(this).attr('data-column') );
            console.log($(this).attr('data-column'))  
            // Toggle the visibility
            column.visible( ! column.visible() );
              
          } );

谢谢。如果您还想要更多，请告诉我。

【问题讨论】：

标签： javascript jquery bootstrap-4 datatable datatables

【解决方案1】：

我的答案集样式宽度：100%

<table class="table table-bordered table-striped hover" id="table-result" style="width:100%">

【讨论】：