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

Merge pull request #69 from hartzell/bug/datatables

Browse Source 
Fix and improve the DataTables support
This commit is contained in:
Tom Johnson 2017-04-10 22:21:33 -07:00 committed by GitHub
commit d87d809c29
2 changed files with 47 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
_layouts/default.html
View File

@ -50,16 +50,23 @@
});
</script>
{% if page.datatable == true %}
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
<!-- 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.datatable').DataTable( {
paging: false,
stateSave: 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 %}

147
pages/mydoc/mydoc_tables.md
View File

@ -10,20 +10,6 @@ permalink: mydoc_tables.html
folder: mydoc
---
{% unless site.output == "pdf" %}
<script>
$(document).ready(function(){
$('table.display').DataTable( {
paging: true,
stateSave: true,
searching: true
}
);
});
</script>
{% endunless %}
## Multimarkdown Tables
You can use Multimarkdown syntax for tables. The following shows a sample:
@ -101,117 +87,46 @@ If you need a more sophisticated table syntax, use HTML syntax for the table. Al
</tbody>
</table>
## jQuery datables
## jQuery DataTables
You also have the option of using a [jQuery datatable](https://www.datatables.net/), which gives you some more options. If you want to use a jQuery datatable, then add `datatable: true` in a page's frontmatter. This will load the right jQuery datatable scripts for the table on that page only (rather than loading the scripts on every page of the site.)
You also have the option of using a [jQuery DataTable](https://www.datatables.net/), which gives you some additional capabilities. To use a jQuery DataTable in a page, include `datatable: true` in a page's frontmatter. This tells the default layout to load the necessary CSS and javascript bits and to include a `$(document).ready()` function that initializes the DataTables library.
Also, you need to add this script to trigger the jQuery table on your page:
You can change the options used to initialize the DataTables library by editing the call to `$('table.display').DataTable()` in the default layout. The available options for Datatables are described in the [DataTable documentation](https://www.datatables.net/manual/options), which is excellent.
```js
<script>
$(document).ready(function(){
You also must add a class of `display` to your tables. You can change the class, but then you'll need to change the trigger defined in the `$(document).ready()` function in the default layout from `table.display` to the class you prefer.
$('table.display').DataTable( {
paging: true,
stateSave: true,
searching: true
}
);
});
</script>
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.
If you use an HTML table, adding `class="display"` to the `<table>` tag is sufficient.
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>
```
The available options for the datable are described in the [datatable documentation](https://www.datatables.net/manual/options), which is excellent.
and get this:
Additionally, you must add a class of `display` to your tables. (You can change the class, but then you'll need to change the trigger above from `table.display` to whatever class you want to you. You might have different triggers with different options for different tables.)
<div class="datatable-begin"></div>
Since Markdown doesn't allow you to add classes to tables, you'll need to use HTML for any datatables. Here's an example:
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
```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>
```
<div class="datatable-end"></div>
This renders to the following:
<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:
@ -219,7 +134,7 @@ Notice a few features:
* You can sort the column order.
* You can page the results so that you show only a certain number of values on the first page and then require users to click next to see more entries.
Read more of the [datatable documentation](https://www.datatables.net/manual/options) to get a sense of the options you can configure. You should probably only use datatables when you have long, massive tables full of information.
Read more of the [DataTable documentation](https://www.datatables.net/manual/options) to get a sense of the options you can configure. You should probably only use DataTables when you have long, massive tables full of information.
{% include note.html content=" Try to keep the columns to 3 or 4 columns only. If you add 5+ columns, your table may create horizontal scrolling with the theme. Additionally, keep the column heading titles short." %}