大发

password iconPASSWORD
MANAGEMENT
Your  Account:
password iconPASSWORD
MANAGEMENT
Instructional and Information Technology Services (IITS)

Datatable Snippet

What is a Datatable Snippet?

Categorize/organize, filter, sort and search medium to large data sets in table format. 

How to Use a Datatable Snippet:

  1. Open the page and click the area where the Datatable is supposed to be placed.
  2. Click the snippet  -OR- the gadgets (top-right of your page) to open the gadget side bar. Click the Snippets header to expand.
  3. Select Datatable from the Snippets menu.
  4. A table with display options will be added to your page:
    datatable snippet editor
  5. Set your table's options:
    • Section 1: Enter x for each column that will be used as a filter; this is shown as Zone A in the table below.
    • Section 2: Enter x for each column that needs to be hidden.
    • Section 3: Enter radio (default) or check for each filtered column.
      This determines the type of filter, radio buttons (one filter at a time) and check boxes (multiple filters simultaneously).
    • Section 4: Enter x if the Entries Dropdown (shown as Zone B in the table below) should be hidden.
    • Section 5: Enter custom numbers for the Entries Dropdown (default = 10,25,50, All); this is shown as Zone B in the table below.
    • Section 6: Enter number of rows shown when table is loaded (default = All).
    • Section 7: Enter x to hide searchbox; this is shown as Zone C in the table below.
    • Section 8: Enter x to hide page numbers; this is shown as Zone D in the table below.
    • Section 9: Enter x to hide pagination; this is shown as Zone E in the table below.
    • Section 10: Enter column number to sort by (1,2,3 or 4). Use a negative number to reverse the sort order.
    • Section 11: Either copy/paste an existing table from Excel or Word or create a new HTML table in OU
      • Maximum 4 columns can be used.
      • Each column can be used for filtering, sorting and searching.
      • The first row always serves as the table header. 
  6. Click save in the toolbar to save your changes.
  7. Once saved, the snippet will display your table data with all the chosen options

    Example datatable:
    rendered datatable view
  8. Publish the page to apply the changes to the live site.

Currently only one datatable snippet can be used on a page.

Back to Module