# DataTables: Basic Operation

**URL:** <https://talk.jekyllrb.com/t/datatables-basic-operation/5065>\
**Category:** Uncategorized\
**Created:** [October 9, 2020, 6:07pm UTC](https://talk.jekyllrb.com/t/datatables-basic-operation/5065 "2020-10-09T18:07:18Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![iaw4](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/iaw4/32/5737_2.png) [@iaw4](https://talk.jekyllrb.com/u/iaw4)\
**Post date:** [October 9, 2020, 6:07pm UTC](https://talk.jekyllrb.com/t/datatables-basic-operation/5065/1 "2020-10-09T18:07:18Z")

</div>

I am trying to turn on DataTables in a jekyll 4.1.1 on a default install for ubuntu. So I created a minimalist test file (enclosed below) and ran it through jekyll. if I understand the docs correctly, `datatable: true` in the header should operationalize it, linking to the data table css and js (and document.ready). Unfortunately, the resulting html does not do this. I could get this to work myself (by handincluding all the necessary components as raw html), but before I rely on my own hacks, I was wondering whether there is a standard way and I merely forgot something.

```auto
---
title: "Test Table"
datatable: true
---

# Mark Down

<div class="datatable-begin"></div>

| time| sig1A|
|----:|-----:|
| 1| 3|
| 2| 4|

<div class="datatable-end"></div>

# HTML

<table class="display">
 <thead>
  <tr>
   <th style="text-align:right;"> time </th>
   <th style="text-align:right;"> sig1A </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:right;"> 4 </td>
   <td style="text-align:right;"> 5 </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 6 </td>
   <td style="text-align:right;"> 7 </td>
  </tr>
</tbody>
</table>

```

---

<div class="post-metadata">

**Author:** ![ashmaroli](https://avatars.discourse-cdn.com/v4/letter/a/df705f/32.png) [@ashmaroli](https://talk.jekyllrb.com/u/ashmaroli)\
**Post date:** [October 9, 2020, 7:21pm UTC](https://talk.jekyllrb.com/t/datatables-basic-operation/5065/2 "2020-10-09T19:21:32Z")

</div>

> [@iaw4](#):
>
> if I understand the docs correctly, `datatable: true` in the header should operationalize it

What docs??  
Could you post a link to it?

---

<div class="post-metadata">

**Author:** ![iaw4](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/iaw4/32/5737_2.png) [@iaw4](https://talk.jekyllrb.com/u/iaw4)\
**Post date:** [October 9, 2020, 9:24pm UTC](https://talk.jekyllrb.com/t/datatables-basic-operation/5065/3 "2020-10-09T21:24:02Z")

</div>

I am not sure what you are asking…which is probably the problem. by “doc,” do you mean the document that I enclosed?

I have simply installed jekyll 4.1.1 on ubuntu (nothing extra), created the test document, and build it to a destination (ok, I had a default layout, too).

---

<div class="post-metadata">

**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\
**Post date:** [October 9, 2020, 11:26pm UTC](https://talk.jekyllrb.com/t/datatables-basic-operation/5065/4 "2020-10-09T23:26:23Z")

</div>

Docs, as in documentation in reference to this on your previous post:

> [@iaw4](#):
>
> if I understand the docs correctly, `datatable: true` in the header should operationalize it

`datatable: true` is not something core to Jekyll. I’m guessing that is something to do with whatever custom theme you have installed.

---

<div class="post-metadata">

**Author:** ![iaw4](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/iaw4/32/5737_2.png) [@iaw4](https://talk.jekyllrb.com/u/iaw4)\
**Post date:** [October 10, 2020, 2:57am UTC](https://talk.jekyllrb.com/t/datatables-basic-operation/5065/5 "2020-10-10T02:57:28Z")

</div>

if it is not part of jekyll core and requires some particular theme, then this makes sense. (it would be a nice feature for core jekyll, though.) I just need to do it myself by hand then.

grazie. /iaw

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [October 10, 2020, 5:47am UTC](https://talk.jekyllrb.com/t/datatables-basic-operation/5065/6 "2020-10-10T05:47:21Z")

</div>

were you using this documentation theme?

> **[Tables | Jekyll theme for documentation](https://idratherbewriting.com/documentation-theme-jekyll/mydoc_tables.html#jquery-datatables)**

---

<div class="post-metadata">

**Author:** ![iaw4](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/iaw4/32/5737_2.png) [@iaw4](https://talk.jekyllrb.com/u/iaw4)\
**Post date:** [October 10, 2020, 6:05am UTC](https://talk.jekyllrb.com/t/datatables-basic-operation/5065/7 "2020-10-10T06:05:58Z")

</div>

Nope. To be honest, I was confused. I was not sure whether the name implied that it was a specialized theme for jekyll, or simply the documentation for jekyll. (I had found the hint to `DataTables: true` through google, and noted that it was in the documentation theme.) it is a very generic name for something that is not part of the core…

The front page [https://idratherbewriting.com/documentation-theme-jekyll/index.html](https://idratherbewriting.com/documentation-theme-jekyll/index.html) also did not provide an explanation (of differences, enhancements, examples) upfront, and no links to some sites (or a list of when to consider using it).

I am not complaining. I am just explaining why it was not clear to me what I was looking at.

/iaw

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [October 10, 2020, 10:18am UTC](https://talk.jekyllrb.com/t/datatables-basic-operation/5065/8 "2020-10-10T10:18:28Z")

</div>

Can you post some debugging feedback to see what is broken.

- are you using an unsupported themed on GH Pages? Are you using remote theme plugin to pull it in?
- can you reproduce the issue locally?
- when you visit your page and view html source, are jquery and jquery-datatables in your JS script tags of your `head` tag? You might have to adjust your use of layouts to make sure you use the head includes or the theme’s default layout
- in your JS console do you get an error downloading or executing jquery?

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [October 10, 2020, 10:21am UTC](https://talk.jekyllrb.com/t/datatables-basic-operation/5065/9 "2020-10-10T10:21:17Z")

</div>

There are multiple ways to approach datatables. HTML vs markdown. Jekyll theme vs add JS yourself. Can you get any one approach to work?

Here is a related question using the same theme.

[https://talk.jekyllrb.com/t/how-to-pull-csv-into-datatables/](https://talk.jekyllrb.com/t/how-to-pull-csv-into-datatables/)

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [October 10, 2020, 9:17pm UTC](https://talk.jekyllrb.com/t/datatables-basic-operation/5065/10 "2020-10-10T21:17:38Z")

</div>

ah - haha - I can see how that could look like actual jekyll documentation. It is a cool theme, that is for sure, lots can be learned from how he put everything together.
