One can easily set up a regular table in HTML and from there convert it into a DataTable with searching and sorting functionality as well as mobile-friendly responsive behavior. Follow the steps below:

Step 1

First I put this table below (Copy and paste this into the DEFAULT region OR in a Block assigned or "wired" to another region):

name 1 name 2 name 3 name 4 name 5
john jacob jingle heimer schmidt
bruce boba anakin yoda rocky
rocket finn leia luke robin
wampa james tiberias kirk spock
daffy bugs elmer gumby bob

The table uses this code (If you want to copy and paste this code, make sure to use the HTML button in the WYSIWYG editor first):

<table>
<thead>
    <tr>
        <th>name 1</th>
        <th>name 2</th>
        <th>name 3</th>
        <th>name 4</th>
        <th>name 5</th>
    </tr>
</thead>
<tbody>
<tr>
<td>john</td>
<td>jacob</td>
<td>jingle</td>
<td>heimer</td>
<td>schmidt</td>
</tr>
<tr>
<td>bruce</td>
<td>boba</td>
<td>anakin</td>
<td>yoda</td>
<td>rocky</td>
</tr>
<tr>
<td>rocket</td>
<td>finn</td>
<td>leia</td>
<td>luke</td>
<td>robin</td>
</tr>
<tr>
<td>wampa</td>
<td>james</td>
<td>tiberias</td>
<td>kirk</td>
<td>spock</td>
</tr>
<tr>
<td>daffy</td>
<td>bugs</td>
<td>elmer</td>
<td>gumby</td>
<td>bob</td>
</tr>
</tbody>
</table>


Notice its form with thead and tbody, which datatable requires.

Step 2

Second I wire this block: 

/_shared-blocks/tables/datatable-with-default-features

To "wire" a block means to edit the page in question, go to the outputs tab and assign that block to an available region:

DataTable wiring

(Note: It doesn't have to be REGION-04 necessarily. It just has to be an available region below the table.)


name 1 name 2 name 3 name 4 name 5
john jacob jingle heimer schmidt
bruce boba anakin yoda rocky
rocket finn leia luke robin
wampa james tiberias kirk spock
daffy bugs elmer gumby bob

For now, this shows no change. There is one more step.

Step 3

Finally, I add class="datatable" to the table element (in the HTML in the page or Block where the table code exists). And that's when the "magic" happens. 


name 1 name 2 name 3 name 4 name 5
john jacob jingle heimer schmidt
bruce boba anakin yoda rocky
rocket finn leia luke robin
wampa james tiberias kirk spock
daffy bugs elmer gumby bob

That's it!

However, one can go beyond the "white" default theme of the table if desired by going with a "tan" theme.  Simply add the following code in the HTML of the Block or page where the table is:

For tan: <link rel="stylesheet" type="text/css" href="//www.jmu.edu/web_ssi/extendedcss/datatable-tan.css" />

For gray: <link rel="stylesheet" type="text/css" href="//www.jmu.edu/web_ssi/extendedcss/datatable-gray.css" />

If you need further assistance with DataTables, please itweb@jmu.edu.


What if I have an old DataTable that I want to convert to the new responsive DataTable (i.e., DataTable conversion)?

Back to Top