使用滚动条固定宽度和高度

时间：2018-10-24 09:05:14

标签： javascript jquery html datatable datatables

我有这样的数据表，我使用此网站上的数据表：https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html。

我实现了代码，但无法正常工作，请参见下面的代码：

<html>
<head>

    <title>Datatables.net</title>

    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.3.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
</head>
<body>
    <style>
        .table-container {
            position: relative;
            width: 600px;
            height: 100%;
            border: 2px solid red;
            display: inline-block;
        }

        table {
            float: left;
        }

        th {
            border: 1px solid black;
            padding: 10px;
        }

        td {
            border: 1px solid black;
            padding: 10px;
            margin: 0;
        }

        .right {
            overflow: auto;
        }

        .container {
            overflow-y: auto;
            height: 200px;
        }

        th, td {
            white-space: nowrap;
        }

        div.dataTables_wrapper {
            width: 500px;
            margin: 0 auto;
        }
        
    </style>
    <link href="DataTables/datatables.min.css" rel="stylesheet" />
    <script src="DataTables/datatables.min.js"></script>
    <script type="text/javascript" src="fixedColumn.js"></script>
    <script>
        $(document).ready(function () {
            var table = $('#example').DataTable({
                scrollY: "300px",
                scrollX: true,
                scrollCollapse: true,
                paging: false,
                fixedColumns: {
                    leftColumns: 1,
                    rightColumns: 1
                }
            });
        });
    </script>

    <table class="table table-striped row-border order-column" id="example" style="width: 100%;">

        <thead>
            <tr>
                <th class="text-center">Opérations</th>
                <th></th>
                <th colspan="8" class="text-center not-fixed">Commissions directes</th>
                <th colspan="7" class="text-center">Commissions sur incitation</th>
                <th colspan="9" class="text-center">Paramètres autres</th>
            </tr>
            <tr>
                <th class="">Opérations possibles</th>
                <th></th>
                <th class="">Offre commerciale 0%</th>
                <th rowspan="2">Taux de frais client</th>
                <th rowspan="2">Seuil taux de frais client</th>
                <th>Commissions directes</th>
                <th colspan="4" class="text-center">Coeff VP</th>
                <th>Commissions sur incitation</th>
                <th colspan="4" class="text-center">Coef VP</th>
                <th rowspan="2">t% incitation (pour règle COMMINC3)</th>
                <th rowspan="2" style="width:100px">N° règle</th>
                <th>Numéro de contrat</th>
                <th>Montant prime unique</th>
                <th>Montant versements programmés</th>
                <th>Cotisation mensuelle première année</th>
                <th>Avertissement double saisie</th>
                <th>Profil client</th>
                <th>Taux UC proposé</th>
                <th>Taux UC choisi</th>
                <th>Recommandation</th>
            </tr>
            <tr>
                <th class="">Opération</th>
                <th class="text-center col-oui-non">O/N</th>
                <th class="text-center col-oui-non">O/N</th>
                <th class="text-center">O/N</th>
                <th class="text-center">M</th>
                <th class="text-center">T</th>
                <th class="text-center">S</th>
                <th class="text-center">A</th>
                <th class="text-center">O/N</th>
                <th class="text-center">M</th>
                <th class="text-center">T</th>
                <th class="text-center">S</th>
                <th class="text-center">A</th>
                <th class="text-center col-oui-non">O/N</th>
                <th class="text-center col-oui-non">O/N</th>
                <th class="text-center col-oui-non">O/N</th>
                <th class="text-center col-oui-non">O/N</th>
                <th class="text-center col-oui-non">O/N</th>
                <th class="text-center col-oui-non">O/N</th>
                <th class="text-center col-oui-non">O/N</th>
                <th class="text-center col-oui-non">O/N</th>
                <th class="text-center col-oui-non">O/N</th>
            </tr>
        </thead>


        <tbody>


        </tbody>

    </table>

</body>
</html>

有谁能帮助我修复左侧的第一列，以帮助用户识别行

1 个答案:

答案 0 :(得分：0)

我认为js链接有问题。

这是更新的代码：

我在您的代码中添加了以下必需的链接和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>


.table-striped {
  background: #fff;
}


<html>

<head>

  <title>Datatables.net</title>

  <link href="Content/bootstrap.css" rel="stylesheet" />
  <script src="Scripts/jquery-3.3.1.js"></script>
  <script src="Scripts/bootstrap.js"></script>

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



</head>

<body>
  <style>
    .table-container {
      position: relative;
      width: 600px;
      height: 100%;
      border: 2px solid red;
      display: inline-block;
    }
    
    table {
      float: left;
    }
    
    th {
      border: 1px solid black;
      padding: 10px;
    }
    
    td {
      border: 1px solid black;
      padding: 10px;
      margin: 0;
    }
    
    .right {
      overflow: auto;
    }
    
    .container {
      overflow-y: auto;
      height: 200px;
    }
    
    th,
    td {
      white-space: nowrap;
    }
    
    div.dataTables_wrapper {
      width: 500px;
      margin: 0 auto;
    }
    
    .table-striped {
      background: #fff;
    }
  </style>
  <link href="DataTables/datatables.min.css" rel="stylesheet" />
  <script src="DataTables/datatables.min.js"></script>
  <script type="text/javascript" src="fixedColumn.js"></script>
  <script>
    $(document).ready(function() {
      var table = $('#example').DataTable({
        scrollY: "300px",
        scrollX: true,
        scrollCollapse: true,
        paging: false,
        fixedColumns: {
          leftColumns: 1,
          rightColumns: 1
        }
      });
    });
  </script>

  <table class="table table-striped row-border order-column" id="example" style="width: 100%;">

    <thead>
      <tr>
        <th class="text-center">Opérations</th>
        <th></th>
        <th colspan="8" class="text-center not-fixed">Commissions directes</th>
        <th colspan="7" class="text-center">Commissions sur incitation</th>
        <th colspan="9" class="text-center">Paramètres autres</th>
      </tr>
      <tr>
        <th class="">Opérations possibles</th>
        <th></th>
        <th class="">Offre commerciale 0%</th>
        <th rowspan="2">Taux de frais client</th>
        <th rowspan="2">Seuil taux de frais client</th>
        <th>Commissions directes</th>
        <th colspan="4" class="text-center">Coeff VP</th>
        <th>Commissions sur incitation</th>
        <th colspan="4" class="text-center">Coef VP</th>
        <th rowspan="2">t% incitation (pour règle COMMINC3)</th>
        <th rowspan="2" style="width:100px">N° règle</th>
        <th>Numéro de contrat</th>
        <th>Montant prime unique</th>
        <th>Montant versements programmés</th>
        <th>Cotisation mensuelle première année</th>
        <th>Avertissement double saisie</th>
        <th>Profil client</th>
        <th>Taux UC proposé</th>
        <th>Taux UC choisi</th>
        <th>Recommandation</th>
      </tr>
      <tr>
        <th class="">Opération</th>
        <th class="text-center col-oui-non">O/N</th>
        <th class="text-center col-oui-non">O/N</th>
        <th class="text-center">O/N</th>
        <th class="text-center">M</th>
        <th class="text-center">T</th>
        <th class="text-center">S</th>
        <th class="text-center">A</th>
        <th class="text-center">O/N</th>
        <th class="text-center">M</th>
        <th class="text-center">T</th>
        <th class="text-center">S</th>
        <th class="text-center">A</th>
        <th class="text-center col-oui-non">O/N</th>
        <th class="text-center col-oui-non">O/N</th>
        <th class="text-center col-oui-non">O/N</th>
        <th class="text-center col-oui-non">O/N</th>
        <th class="text-center col-oui-non">O/N</th>
        <th class="text-center col-oui-non">O/N</th>
        <th class="text-center col-oui-non">O/N</th>
        <th class="text-center col-oui-non">O/N</th>
        <th class="text-center col-oui-non">O/N</th>
      </tr>
    </thead>


    <tbody>


    </tbody>

  </table>

</body>

</html>

相关问题
最新问题