Creating a Datatable

When creating content for the web there will be times when creating a table is the best tool to display information. Depending on the type of information being presented you may decide that being able to interact with the table would be beneficial to the viewer and assist them in finding specific information.

Below is an enhanced version of a table also known as a "datatable". The datatable provides built-in capabilities such as sorting, searching for items in the table, viewing a specific number of entries on a page with a pagination feature to navigate to other listed entries, and offers an option to copy or print the information, as well as download the table into a .csv, .xlsx. or .pdf file.

Date Location Class Name  Teacher
Oct 20 Fenwick Library Digital Humanities for the Web Danny Collier
Nov 1 Enterprise Hall Learning Google Analytics Craig Zaccaro
Nov 3 Buchanan Hall Creating Content for Students Melanie White
Nov 5 Enterprise Hall Learning Google Analytics II Craig Zaccaro
Nov 11 Buchanan Hall New Editor Training Melanie White
Nov 16 Buchanan Hall New Editor Training Melanie White
Nov 20 Innovation Hall Intermediate Editor Training Danny Collier
Nov 31  Enterprise Hall Designing for the Web Melanie White
  1. To create a datatable, add a new page or edit an existing page. 
  2. In the Main content, click "Table" and hover over the "Table" option. Select the number of rows and columns you would like your table to have (you can always add more rows/columns later).
    Table tools screenshot
  3. After selecting the number of columns/rows, a table will automatically appear. Fill in your content and add additional rows and columns using the "Table" menu and selecting "Row" or "Column" or use the toolbar that appears with the table to add and delete rows and columns. 
    Table toolbar screenshot
  4. Once your table is complete, save your changes (and view the page if you like).
  5. Now to add the datatables functionality. In order for datatables to work, we have to set the first row as the header. This will most likely be your table's column names. To set the header, select the first row in your table (the first row will become highlighted blue). Next, click "Table" > "Row" > "Row Properties" and a pop-up box will appear. Right now the row type for the first row is set to "Body". Change this setting from "Body" to "Header" and click "OK" to save. Nothing will appear different in your view but the change has taken affect in the back-end.
    Row properties screenshot
  6. There is one last step needed to add the datatable functionality. This will require editing the source code (html) so if at anytime you feel uncomfortable or need assistance, please write us or give us a call. 
  7. Copy the below text.
    class="dataTables-standard"
  8. Click "Tools" > "Source code" and a pop-up box with html will appear. In the html, paste the copied text in between <table and style=. Click 'OK'.
    table source code screenshotSave changes and view the page. Your table should now have the same features as the datatable shown on this page. If not, please contact us for assistance.