From ec98b67b6f0a40d1874b293ca04a8b9cb194092a Mon Sep 17 00:00:00 2001 From: George Hartzell Date: Tue, 14 Feb 2017 09:32:00 -0800 Subject: [PATCH 1/5] Fix javascript console errors 1. Add necessary closing bits to the doc ready function. 2. Update to current version of DataTables css and js. --- _layouts/default.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index 90c1c4e..f786514 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -39,16 +39,16 @@ }) {% if page.datatable == true %} - - + + {% endif %} @@ -77,4 +77,4 @@ {% if site.google_analytics %} {% include google_analytics.html %} {% endif %} - \ No newline at end of file + From 8dc46885e193afa2b16aa075444a5eb15ae4c7d6 Mon Sep 17 00:00:00 2001 From: George Hartzell Date: Tue, 14 Feb 2017 11:22:13 -0800 Subject: [PATCH 2/5] Use ready function from the default layouts You don't actually need to include the document ready function in the page. The commit updates the document ready function in the default template to specify the features discussed in the prose and deletes the one that is embedded in the page itself. --- _layouts/default.html | 7 ++++--- pages/mydoc/mydoc_tables.md | 14 -------------- 2 files changed, 4 insertions(+), 17 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index f786514..07402da 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -43,9 +43,10 @@ -{% endunless %} - ## Multimarkdown Tables You can use Multimarkdown syntax for tables. The following shows a sample: From 0eee5ad0f108e089611b1d490b064371c6fcf8e5 Mon Sep 17 00:00:00 2001 From: George Hartzell Date: Tue, 14 Feb 2017 11:23:56 -0800 Subject: [PATCH 3/5] Wordsmith the prose --- pages/mydoc/mydoc_tables.md | 28 +++++++--------------------- 1 file changed, 7 insertions(+), 21 deletions(-) diff --git a/pages/mydoc/mydoc_tables.md b/pages/mydoc/mydoc_tables.md index 90c35a2..98b4d25 100644 --- a/pages/mydoc/mydoc_tables.md +++ b/pages/mydoc/mydoc_tables.md @@ -87,31 +87,17 @@ 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. -The available options for the datable are described in the [datatable documentation](https://www.datatables.net/manual/options), which is excellent. - -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: +Markdown doesn't allow you to add classes to tables, so you'll need to use HTML for any DataTables. Here's an example: ```html @@ -205,7 +191,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." %} From c1baee6f4a9fc510c1530ff9dd9caa305a5ce1b3 Mon Sep 17 00:00:00 2001 From: George Hartzell Date: Tue, 14 Feb 2017 12:59:43 -0800 Subject: [PATCH 4/5] Enable DataTables for Markdown tables 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/ --- _layouts/default.html | 23 +++++--- pages/mydoc/mydoc_tables.md | 109 +++++++++--------------------------- 2 files changed, 41 insertions(+), 91 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index 07402da..5c62251 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -38,18 +38,25 @@ $('[data-toggle="tooltip"]').tooltip() }) + {% if page.datatable == true %} + + {% endif %} diff --git a/pages/mydoc/mydoc_tables.md b/pages/mydoc/mydoc_tables.md index 98b4d25..1e5bee7 100644 --- a/pages/mydoc/mydoc_tables.md +++ b/pages/mydoc/mydoc_tables.md @@ -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 `` 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 `
` tag is sufficient. -```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
+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 + +
``` -This renders to the following: +and get this: + +
+ +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 + +
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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: From 1d45fd9a118f8ebc46f88af28c5e6b9086bf679d Mon Sep 17 00:00:00 2001 From: George Hartzell Date: Tue, 14 Feb 2017 13:55:28 -0800 Subject: [PATCH 5/5] Whitespace Neatness counts... Make the sample table columns line up.... --- pages/mydoc/mydoc_tables.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/mydoc/mydoc_tables.md b/pages/mydoc/mydoc_tables.md index 1e5bee7..2c7e66b 100644 --- a/pages/mydoc/mydoc_tables.md +++ b/pages/mydoc/mydoc_tables.md @@ -107,7 +107,7 @@ Markdown, however, doesn't allow you to add classes to tables, so you'll need to Food | Description | Category | Sample type ------- | ------------------------------------- | -------- | ----------- Apples | A small, somewhat round ... | Fruit | Fuji -Bananas | A long and curved, often-yellow ... | Fruit | Snow +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