在 html 文档中添加带排序的 DataTable

Question

我想在 html 文档中创建一个简单的 table。 table 存在，但我无法使用 table 进行订购和操作。我是 html 和 js 的菜鸟。我的结果：

<link rel="stylesheet" type="text/css" href="static/datatables.min.css"/>
<script type="text/javascript" src="static/datatables.min.js"></script>
<table id="example" class="display">
<thead>
  <tr><th>Person</th><th>Monthly pay</th></tr>
</thead>
<tbody>
  <tr><td>Jan Molby</td><td>12</td></tr>
  <tr><td>Steve Nicol</td><td>8</td></tr>
  <tr><td>Steve McMahon</td><td>9</td></tr>
  <tr><td>John Barnes</td><td>15</td></tr>
</tbody>
<tfoot>
  <tr><td>TOTAL</td><td>£45,000</td></tr>
</tfoot>
</table>
<script type="text/javascript">
  $(document).ready(function() {
      $('#example').dataTable();
  } );
</script>

Answer 1

你做如下的事情：

$(document).ready(function() {
    $('#example').DataTable( {
        "order": [[ 3, "desc" ]]
    } );
} );

确保你已经添加了以下两个JS：

https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js

和CSS文件：

https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css

文档：https://datatables.net/examples/basic_init/table_sorting.html

Answer 2

看来你遗漏了一些东西。

喜欢 CSS 的正确路径和 DataTable

的 JavaScript

你可以直接使用CDN for DataTable，也不要忘记添加CDN for jQuery.

您可以从这里获取 DataTable CDN DataTable CDN Link

检查下面的示例代码。

$(document).ready(function() {
  $('#example').dataTable();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<table id="example" class="display">
  <thead>
    <tr>
      <th>Person</th>
      <th>Monthly pay</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jan Molby</td>
      <td>12</td>
    </tr>
    <tr>
      <td>Steve Nicol</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Steve McMahon</td>
      <td>9</td>
    </tr>
    <tr>
      <td>John Barnes</td>
      <td>15</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>TOTAL</td>
      <td>£45,000</td>
    </tr>
  </tfoot>
</table>

在 html 文档中添加带排序的 DataTable

Add DataTable with sort in html doc

html

javascript

datatable