HPCE/gitea-pages
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
Show Stats 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 %}

109
pages/mydoc/mydoc_tables.md
View File

@ -97,93 +97,36 @@ You also must add a class of `display` to your tables. You can change the class
You can also add page-specific triggers (by copying the `<script></script>` block from the default layout into the page) and classes, which lets you use different options on different tables.
Markdown doesn't allow you to add classes to tables, so you'll need to use HTML for any DataTables. Here's an example:
If you use an HTML table, adding `class="display"` to the `<table>` tag is sufficient.
```html
<table id="sampleTable" class="display">
<thead>
<tr>
<th>Parameter</th>
<th>Description</th>
<th>Type</th>
<th>Default Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Parameter 1</td>
<td>Sample description
</td>
<td>Sample type</td>
<td>Sample default value</td>
</tr>
<tr>
<td>Parameter 2</td>
<td>Sample description
</td>
<td>Sample type</td>
<td>Sample default value</td>
</tr>
<tr>
<td>Parameter 3</td>
<td>Sample description
</td>
<td>Sample type</td>
<td>Sample default value</td>
</tr>
<tr>
<td>Parameter 4</td>
<td>Sample description
</td>
<td>Sample type</td>
<td>Sample default value</td>
</tr>
</tbody>
</table>
Markdown, however, doesn't allow you to add classes to tables, so you'll need to use a trick: add `<div class="datatable-begin"></div>` before the table and `<div class="datatable-end"></div>` after the table. The default layout includes a jQuery snippet that automagically adds the `display` class to any table it finds between those two markers. So you can start with this (we've trimmed the descriptions for display):
```markdown
<div class="datatable-begin"></div>
Food | Description | Category | Sample type
------- | ------------------------------------- | -------- | -----------
Apples | A small, somewhat round ... | Fruit | Fuji
Bananas | A long and curved, often-yellow ... | Fruit | Snow
Kiwis | A small, hairy-skinned sweet ... | Fruit | Golden
Oranges | A spherical, orange-colored sweet ... | Fruit | Navel
<div class="datatable-end"></div>
```
This renders to the following:
and get this:
<div class="datatable-begin"></div>
Food | Description | Category | Sample type
------- | ------------------------------------------------------------------------------------------------- | -------- | -----------
Apples | A small, somewhat round and often red-colored, crispy fruit grown on trees. | Fruit | Fuji
Bananas | A long and curved, often-yellow, sweet and soft fruit that grows in bunches in tropical climates. | Fruit | Snow
Kiwis | A small, hairy-skinned sweet fruit with green-colored insides and seeds. | Fruit | Golden
Oranges | A spherical, orange-colored sweet fruit commonly grown in Florida and California. | Fruit | Navel
<div class="datatable-end"></div>
<table id="sampleTable" class="display">
<thead>
<tr>
<th>Food</th>
<th>Description</th>
<th>Category</th>
<th>Sample type</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apples</td>
<td>A small, somewhat round and often red-colored, crispy fruit grown on trees.
</td>
<td>Fruit</td>
<td>Fuji</td>
</tr>
<tr>
<td>Bananas</td>
<td>A long and curved, often-yellow, sweet and soft fruit that grows in bunches in tropical climates.
</td>
<td>Fruit</td>
<td>Snow</td>
</tr>
<tr>
<td>Kiwis</td>
<td>A small, hairy-skinned sweet fruit with green-colored insides and seeds.
</td>
<td>Fruit</td>
<td>Golden</td>
</tr>
<tr>
<td>Oranges</td>
<td>A spherical, orange-colored sweet fruit commonly grown in Florida and California.
</td>
<td>Fruit</td>
<td>Navel</td>
</tr>
</tbody>
</table>
Notice a few features: