KB User's Guide - Advanced HTML - Creating a Sortable Table

This document explains how to add a table to a KB document that allows the reader to sort the table rows based on the values in any particular column.

Example

Below is an example of a sortable table. You may click on the arrows next to any of the column headers to re-sort the rows based on the values within that column.

First NameLast NameFavorite Food
JohnSmithApples
BuckinghamBadgerBrats
GeorgeCarverPeanut Butter
GarfieldArbuckleLasagna

Adding A Sortable Table to Your KB Document

Note: The instructions provided here apply to the new KB editor only.

  1. In the editor toolbar, select the Insert Table button, then choose the desired number of rows and columns (excluding the header row; this will be added next).

    1-insert-table.png
  2. Click inside any cell to open the table pop-up menu. Select the first button to add a Table Header.

    2-add-header.png
  3. Add the desired values in the header and data cells. The way you add them here will be the initial table sort order when the page loads.

  4. Paste the following into the JavaScript/CSS field (located under "Additional Fields"):

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="/images/group1/shared/jquery.tablesorter.min.js"></script>
    
    <script type="text/javascript">
    jQuery(document).ready(function($) 
        { 
            $(".fr-view table").tablesorter(); 
        } 
    );
    </script>
    
    <link rel="stylesheet" href="/images/group41/shared/DownloadableCSSandJSFiles/tablesorter/jquery.tablesorter.css">
  5. You may now save or publish your document. Please note that none of the styling will be visible while editing, and the sorting function will not work while editing or previewing your document.




Keywords:tablesorter alphabetical rows click columns data text headers sorting order javascript jquery   Doc ID:105964
Owner:Leah S.Group:KB User's Guide
Created:2020-09-18 10:47 CSTUpdated:2020-10-02 15:09 CST
Sites:KB User's Guide
Feedback:  0   0