Question

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

为此的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

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

希望这会对您有所帮助。

添加水平滚动+固定列时的数据表制动器

1 个答案: