From c1baee6f4a9fc510c1530ff9dd9caa305a5ce1b3 Mon Sep 17 00:00:00 2001 From: George Hartzell Date: Tue, 14 Feb 2017 12:59:43 -0800 Subject: [PATCH] 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: