Datatables are used to show a grid of textual data in a way that can be sorted and searched. Below is an example of how a datatable would appear on a page:

Step 1: Copy and paste HTML into content field
  1. Copy the HTML code below
  2. Navigate to the page on which you want the datatable to appear and select Edit > Content tab
  3. In the content field, select the Source Code button (< >)
  4. Paste the HTML code you copied in step 1 into the Source Code field
  5. Click "Ok"

<table class="datatable display" summary="Table">

<th scope="col">Column Heading 1</th>
<th scope="col">Column Heading 2</th>

<td>row 1 data for column 1</td>

<td>row 1 data for column 2</td>

<td>row 2 data for column 1</td>
<td>row 2 data for column 2</td>

Step 2: Add rows and/or columns to the datatable

After you copied and pasted the HTML code above into the Source Code field (whether in an EZ page's content area or in a WYSIWYG multi-block's content field) and clicked "Ok", your datatable should appear like the table below in the content field. You can add/remove columns and rows by clicking on a cell and selecting an action from the table's pop-up.


Step 3: Wire the datatable _shared-blocks to the page
  1. On the page, select: Edit > Configure tab
  2. Choose an empty Region (preferably one of the last Regions, like REGION-24) and click "Choose Block"
    • If your datable has less than 100 entrees, browse to:
      • JMU > _shared-blocks > tables > datatable-no-paging 
    • If your datatable has more than 100 entrees, browse to:
      • JMU > _shared-blocks > table > datatable-with-default-features
      • (This block will display 100 entrees of your datatable at a time, with an arrow to navigate between spreadsheets)
  3. Leave "Choose Format" empty
    • Note: Wiring WYSIWYG datatable multi-blocks is the only time you will not choose a format; any other time you wire a multi-block, you must choose a format.

Back to Top