diff --git a/_layouts/default.html b/_layouts/default.html index ebe68e7..80ffc2b 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -50,16 +50,23 @@ }); {% if page.datatable == true %} - - + + + + {% endif %} diff --git a/pages/mydoc/mydoc_tables.md b/pages/mydoc/mydoc_tables.md index 75d64a3..2c7e66b 100644 --- a/pages/mydoc/mydoc_tables.md +++ b/pages/mydoc/mydoc_tables.md @@ -10,20 +10,6 @@ permalink: mydoc_tables.html folder: mydoc --- -{% unless site.output == "pdf" %} - -{% 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 -## 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 - +You can also add page-specific triggers (by copying the `` 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 `` tag is sufficient. + +Markdown, however, doesn't allow you to add classes to tables, so you'll need to use a trick: add `
` before the table and `
` 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 +
+ +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 + +
``` -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.) +
-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 -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterDescriptionTypeDefault Value
Parameter 1Sample description - Sample typeSample default value
Parameter 2Sample description - Sample typeSample default value
Parameter 3Sample description - Sample typeSample default value
Parameter 4Sample description - Sample typeSample default value
-``` +
-This renders to the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FoodDescriptionCategorySample type
ApplesA small, somewhat round and often red-colored, crispy fruit grown on trees. - FruitFuji
BananasA long and curved, often-yellow, sweet and soft fruit that grows in bunches in tropical climates. - FruitSnow
KiwisA small, hairy-skinned sweet fruit with green-colored insides and seeds. - FruitGolden
OrangesA spherical, orange-colored sweet fruit commonly grown in Florida and California. - FruitNavel
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." %}