【发布时间】：2018-10-24 09:05:14
【问题描述】：
我有这样的数据表，我使用这个网站的数据表：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>谁能帮我修复左边的第一列以帮助用户识别行
【问题讨论】：
标签： javascript jquery html datatable datatables