添加水平滚动+固定列时数据表刹车答案

【问题标题】：datatable brakes when adding horizontal scrolling + fixed column添加水平滚动+固定列时数据表刹车
【发布时间】：2019-09-21 09:40:17
【问题描述】：

我正在尝试使用水平滚动的数据表，其中前 2 列应该固定而不滚动

html代码如下

<table class="table display nowrap">
<thead>
    <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
        <th>d</th>
        <th>e</th>
        <th>f</th>
        <th>g</th>
        <th>h</th>
        <th>i</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
  </tbody>
</table>

jquery 代码是

    $('.table').DataTable( {
          "searching": false ,  
          "paging": false ,
          fixedColumns: {
             leftColumns: 1
          },         
          scrollX: true,
    });

所以当我使用数据表库运行这两个代码的组合时，结果如下

screenshot of the result

【问题讨论】：

标签： jquery datatable bootstrap-4

【解决方案1】：

我无法重现您报告的问题。下面是我尝试过的代码。它似乎对您正在寻找的内容感到满意。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DataTable demo</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
    <style>
        /* Ensure that the demo table scrolls */
        th, td {
            white-space: nowrap;
        }

        div.dataTables_wrapper {
            width: 200px;
            margin: 0 auto;
        }
    </style>
    <script>
        $(document).ready(function() {
            var table = $('.table').DataTable( {
                scrollY:        "600px",
                scrollX:        true,
                scrollCollapse: true,
                paging:         false,
                fixedColumns:   {
                    leftColumns: 1,
                    // rightColumns: 1
                }
            } );
        } );
    </script>
</head>
<body>
<table class="table display nowrap">
    <thead>
    <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
        <th>d</th>
        <th>e</th>
        <th>f</th>
        <th>g</th>
        <th>h</th>
        <th>i</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>

    </tbody>
</table>
</body>
</html>

希望对您有所帮助。

【讨论】：

所以它只有在我有 13 个或更多字段时才有效i.stack.imgur.com/nA7PX.png 如果我有更少的i.stack.imgur.com/jGAJv.png，就会发生这种情况
请提供您的代码的完整版本，以便重现问题。我相信根本原因来自您在这里没有提到的其他地方。