Question

我对datatables插件很陌生，当我使用scrollX加载要显示在表中的数据时，列标题和主体未对齐。

这是我的代码。

<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</head>
<body>
<div class="form-row">
    <div class="form-group col-md-12">
      <div id="contact_div" style="padding:10px;">
         <table class="table table-hover table-sm table-striped" id="contact_table">
            <thead class="thead-dark">
             <tr>
             <th scope="col">Customer Name</th>
             <th scope="col">Contact Name</th>
             <th scope="col">Phone Number</th>
             <th scope="col">Email</th>
             <th scope="col">Action Select</th>
             </tr>
             </thead>
          </table>
       </div>
      </div>
    </div>
</body>
</html>
<script>
 $(document).ready(function() {
        var table = $('#contact_table').DataTable({
            "serverside":true,
            "processing": true,
            "scrollX":true,
            "ajax": 'load_table_data',
        });
    })
</script>

Answer 1

您需要将#example更改为自己的ID，即#contact_table。您使用了#example，而您没有使用#contact_table

此外，请确保th中的td和table数目相等，因为DataTables需要well organized表。

 $(document).ready(function() {
    var table = $('#contact_table').DataTable({
        "serverside":true,
        "processing": true,
        "scrollX":true,
        "ajax": 'load_table_data',
    });
})

这是jsfiddle

使用'scrollX'时，数据表的标头和主体不正确

1 个答案: