HPCE/gitea-pages
0
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Activity

Enable DataTables for Markdown tables

Browse Source 
Add a jQuery snippet to decorate any tables between a pair of "marker"
divs with `class=display`.  Credit [here][jq-hack]

Now we can create DataTables using Markdown.

Extend the explanations to include this info.

[jq-hack]: http://www.beardedhacker.com/blog/2015/08/28/add-class-attribute-to-markdown-table/
This commit is contained in:
George Hartzell
2017-02-14 12:59:43 -08:00
parent 0eee5ad0f1
commit c1baee6f4a
2 changed files with 41 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
_layouts/default.html
View File

@ -38,18 +38,25 @@
$('[data-toggle="tooltip"]').tooltip()
})
</script>
{% if page.datatable == true %}
<!-- Include the standard DataTables bits -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
<!-- First, this walks through the tables that occur between ...-begin
and ...-end and add the "datatable" class to them.
Then it invokes DataTable's standard initializer
Credit here: http://www.beardedhacker.com/blog/2015/08/28/add-class-attribute-to-markdown-table/
-->
<script>
$(document).ready(function(){
$('table.display').DataTable( {
paging: true,
stateSave: true,
searching: true
}
);
});
$(document).ready(function(){
$('div.datatable-begin').nextUntil('div.datatable-end', 'table').addClass('display');
$('table.display').DataTable( {
paging: true,
stateSave: true,
searching: true
});
});
</script>
{% endif %}