如何在 DataTable 中保留固定列？

Posted 2023-05-09

【中文标题】如何在 DataTable 中保留固定列？

【英文标题】：How do I leave a fixed column in DataTable?

【发布时间】：2020-12-07 21:28:49

【问题描述】：

我需要一些关于 dataTable 中“fixedColumn”属性的帮助。因此，我需要修复表中的前 4 列，但是任何方法都可以使用，我尝试了 https://datatables.net/reference/option/fixedColumns#:~:text=FixedColumns%20provides%20the%20option%20to,scrolling%20through%20the%20data%20set 中的示例。 https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html 中的另一个示例，其中任何一个都有效。

这是我的桌子：

<div class="row">
      <div class="col-md-12">
        <div class="box box-primary" style="padding: 3px;">
          <div id="chartcontainerSummary">
          <table class="table table-bordered table-responsive table-striped table-hover display row-border order-column" id="tabelaGrande">
            <br>
            <thead>
              <tr>
                <th>Family</th>
                <th>Demand</th>
                <th>MTD</th>
                <th>Delta</th>
                <th>    2020-08-01  </th>
                <th>    2020-08-02  </th>
                <th>    2020-08-03  </th>
                <th>    2020-08-04  </th>
                <th>    2020-08-05  </th>
                <th>    2020-08-06  </th>
                <th>    2020-08-07  </th>
                <th>    2020-08-08  </th>
                <th>    2020-08-09  </th>
                <th>    2020-08-10  </th>
                <th>    2020-08-11  </th>
                <th>    2020-08-12  </th>
                <th>    2020-08-13  </th>
                <th>    2020-08-14  </th>
                <th>    2020-08-15  </th>
                <th>    2020-08-16  </th>
                <th>    2020-08-17  </th>
                <th>    2020-08-18  </th>
                <th>    2020-08-19  </th>
                <th>    2020-08-20  </th>
                <th>    2020-08-21  </th>
                <th>    2020-08-22  </th>
                <th>    2020-08-23  </th>
                <th>    2020-08-24  </th>
                <th>    2020-08-25  </th>
                <th>    2020-08-26  </th>
                <th>    2020-08-27  </th>
                <th>    2020-08-28  </th>
                <th>    2020-08-29  </th>
                <th>    2020-08-30  </th>
                <th>    2020-08-31  </th>
              </tr>
            </thead>
            <?php  while ($arr = mysqli_fetch_array($resultFamily)) ?>
            <tr>
              <td><?php echo $arr['family_sap']; ?></td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
            </tr>
            <?php  ?>
          </table>
          </div>
        </div>
      </div>
    </div>

这是我的 js：

function tabela()
        $("#tabelaGrande").DataTable(
            "paging": false,
            "scrollX": true,
            "scrollY" : "450px",
            "scrollCollapse": true,
            fixedColumns:   
            leftColumns: 1
        
        );
    
    tabela();

这是我的库： JS：

<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" ></script>
<scritp src="https://cdn.datatables.net/fixedcolumns/3.3.1/js/dataTables.fixedColumns.min.js"></script>

CSS：

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.3.1/css/fixedColumns.dataTables.min.css">

所以，它不起作用....我做错了什么？

非常感谢大家！

【参考方案1】：

是的，你可以这样做

$(document).ready(function() 
    var table = $('#example').DataTable( 
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        fixedColumns:   
            leftColumns: 2
         
    );
 );

这里正在工作fiddle

【讨论】：

好吧，它获得了关于分页和滚动的那些属性，但没有修复我的列

先渲染html然后初始化数据表

是的，我想通了...可能库错误...我使用的是 Bootstrap 3，固定列使用的是 bootstrap 4

好吧，终于，找到了我的库，它正在破坏我的代码，只是将其删除并放在 bs4.... 工作！非常感谢，上帝保佑你！