version 3.0 of the theme -- complete overhaul

doc_tables.md

@@ -0,0 +1,160 @@
+---
+title: Tables
+tags: [formatting]
+keywords:
+datatable: true
+summary: 
+---
+{% include linkrefs.html %} 
+
+<script>
+$(document).ready(function(){
+
+    $('table.display').DataTable( {
+        paging: true,
+        stateSave: true,
+        searching: true
+    }
+        );
+});
+</script>
+
+## Multimarkdown Tables
+
+You can use Multimarkdown syntax for tables. The following shows a sample: 
+
+```
+Column 1 | Column 2
+--------|----------
+cell 1a | cell 1b
+cell 2a | cell 2b
+```
+
+This renders to the following:
+
+ Column 1 | Column 2
+--------|----------
+cell 1a | cell 1b
+cell 2a | cell 2b
+
+## jQuery datables
+
+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 enable the right scripts for the table on that page only (rather than loading the scripts on every page of the site.)
+
+Also, add the scripts to trigger the jQuery table on your page:
+
+```js
+<script>
+$(document).ready(function(){
+
+    $('table.display').DataTable( {
+        paging: true,
+        stateSave: true,
+        searching: true
+    }
+        );
+});
+</script>
+```
+
+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 the table. (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: 
+
+```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>
+```
+
+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:
+
+* You can keyword search the table. When you type a word, the table filters to match your word.
+* 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.
+
+{{note}} 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.{{end}}