javascript - 我试图在我的 Mkdocs Material 主题中实现数据表。但是为数据表添加自定义代码不起作用

Question

试图将数据表放入我的 mkdocs Material 主题中。我尝试了不同的方法，但它不能始终如一地工作，有时在页面引用后工作。

mkdocs.yml

extra_css:
  - extra.css
  - https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css

extra_javascript:
  - https://code.jquery.com/jquery-3.5.1.min.js
  - https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js
  - scripts/site.js

scripts/site.js

    $(document).ready(function() {
       $('table.display').DataTable();
   } );

表格

<table id="" class="display" style="width:100%">

</table>

Answer 1

回答:问题出在scripts/site.js和 id表中使用。值'table.display'在 JavaScript 中需要匹配 <table id="">值(value)。

如果我们将它们都设置为类似 myTable 的值, 那么这应该是固定的。

---

解决方案:

Markdown 文件:

## Do data tables work?

<table id="myTable" class="display" style="width:100%">
  <thead><tr><th>Name</th><th>Offices</th></tr></thead>
  <tbody>
    <tr><td>Tiger Nixon</td><td>Edinburgh</td></tr>
    <tr><td>Garrett Winters</td><td>Tokyo</td></tr>
    <tr><td>Ashton Cox</td><td>San Francisco</td></tr>
    <tr><td>Cedric Kelly</td><td>Edinburgh</td></tr>
    <tr><td>Airi Satou</td><td>Tokyo</td></tr>
  </tbody>
</table>

scripts/site.js改变了:

$(document).ready( function () {
    $('#myTable').DataTable();
} );

基本相同mkdocs.yml从上面:

extra_css:
  - https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css

extra_javascript:
  - https://code.jquery.com/jquery-3.6.0.slim.min.js
  - https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js
  - scripts/site.js

然后它应该工作:

---

感谢您提出这个问题:我正在尝试完全按照这个问题提出的建议进行操作，并在 mkdocs-material GitHub 存储库中发现了这个 StackOverflow 线程和一个问题 (#2056)。

---

注意事项

数据表可能无法在深色/浅色主题下正常工作。这里我使用了深色石板主题: