3

Trying to get datatable into my mkdocs material theme. I tried different ways but it does not work consistently, sometimes work after page-referesh.

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

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

</table>
Byju Aravind
  • 31
  • 1

1 Answers1

0

Answer: The problem is with scripts/site.js and with the id used in the table. The value 'table.display' in the JavaScript needs to match the <table id=""> value.

If we set them both to something like myTable, then this should be fixed.

Solution:

Markdown file:

## 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 changed:

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

Basically the same mkdocs.yml from above:

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

Then it should work:

A rendered version of data tables embedded in mkdocs.

Thanks for asking this question: I was trying to do exactly what this question proposed and found both this StackOverflow thread and an issue (#2056) listed in the mkdocs-material GitHub repository.

Caveats

Data tables may not work properly with dark/light themes. Here I used the dark slate theme:

Dark theme version of the site, the data table is completely unreadable.

Alexander L. Hayes
  • 3,892
  • 4
  • 13
  • 34
  • The page https://datatables.net/examples/basic_init/multiple_tables.html claims that the ´table.display' should work for entire classes of tables, not just specific ones, which would be convenient. Any idea why it doesn´t work and needs specific table-ids per table? – Holger Hoefling Nov 26 '21 at 07:58
  • @HolgerHoefling that should be a separate question. – Alexander L. Hayes Nov 26 '21 at 20:44
  • @AlexanderHayes: I thought here would be better as this was part of the original question. While not explicitly mentioned - this is where his script example is from. – Holger Hoefling Nov 28 '21 at 12:55
  • Also this would not work for ajax delivered data https://datatables.net/examples/ajax/simple.html because you basically need more than one `script/site.js` to achieve that function I would think for each page using this table function. The data endpoint is why I would want to use datatables.js in the 1st place. – Peter Moore Mar 02 '22 at 23:12