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:

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:

<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


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. 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:

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" />


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

Back to Top