Modify

Opened 3 years ago

Closed 2 years ago

Last modified 2 years ago

#12850 closed enhancement (fixed)

I have found a way to make TableSorterPlugin work with standard wiki tables, by adding some additional wiki formatting and javascript around them (dynamic)

Reported by: chad.trytten@… Owned by: Peter Suter
Priority: normal Component: TableSorterPlugin
Severity: normal Keywords:
Cc: Trac Release:

Description

How to Create a SortableTable

A SortableTable (-enabled standard wiki table) depends on having installed the TableSorterPlugin and having enabled JavaScript for Trac by enabling render_unsafe_content.

  1. Create a standard wiki table.
    • For example:
      ||= '''One''' =||= '''Two''' =||
      || Three || Four ||
      || Five || Six ||
      
  2. Paste additional formatting text above the standard wiki table, replacing the table "<ID>" with the current count number.
    • For example
      • NOTE: there would be no } } } below the || ********** || in the text you paste - it shows up on this page due to formatting limitations:
        {{{#!table id="table<ID>" class="tablesorter"
        
        || ********** ||
        }}}
        
      would look like this when added above the standard table and <ID> set to 1 (your first table, followed by 2, 3, etc.):
      {{{#!table id="table1" class="tablesorter"
      
      || ********** ||
      ||= '''One''' =||= '''Two''' =||
      || Three || Four ||
      || Five || Six ||
      || ********** ||
      }}}
      
  3. Lastly, paste additional script text below the standard wiki table:
    • For example:
      • NOTE: there would be no { { { above the || ********** || in the text you paste - it shows up on this page due to formatting limitations:
        {{{
        || ********** ||
        
        }}}
        
        {{{
        #!html
        <script type="text/javascript"> var table = document.getElementById("table1"); var header = table.createTHead(); var row = header.insertRow(0); var rows = table.rows; var titles = rows[2]; var cells = titles.cells; for (var i = 0; i = cells.length; i++) { var title = titles.cells[0].innerHTML; var cell = document.createElement("TH"); var text =""; text += "<b>"; text += title; text += "</b></th>"; cell.innerHTML = text; cell.className = "header"; row.appendChild(cell); titles.deleteCell(0); } titles.parentNode.removeChild(titles); table.deleteRow(table.rows.length-1); table.deleteRow(1); </script>
        }}}
        //
        
      would look like this when added above the standard wiki table and <ID> set to 1 (your first table, followed by 2, 3, etc.):
      {{{#!table id="table1" class="tablesorter"
      
      || ********** ||
      ||= '''One''' =||= '''Two''' =||
      || Three || Four ||
      || Five || Six ||
      || ********** ||
      
      }}}
      
      {{{
      #!html
      <script type="text/javascript"> var table = document.getElementById("table1"); var header = table.createTHead(); var row = header.insertRow(0); var rows = table.rows; var titles = rows[2]; var cells = titles.cells; for (var i = 0; i = cells.length; i++) { var title = titles.cells[0].innerHTML; var cell = document.createElement("TH"); var text =""; text += "<b>"; text += title; text += "</b></th>"; cell.innerHTML = text; cell.className = "header"; row.appendChild(cell); titles.deleteCell(0); } titles.parentNode.removeChild(titles); table.deleteRow(table.rows.length-1); table.deleteRow(1); </script>
      }}}
      //
      
    • The final // is to allow for normal editing by the WYSIWYG editor - otherwise, it messed up spacing.
  4. Lastly, edit the table however you'd like! You can use the textarea or WYSIWYG editor. The only text you need to edit (except the replaced <ID> during setup) is in between the || ********** || lines - the code will dynamically do the the rest for you.
  5. WARNING: Don't remove the || ********** || lines - they are programmatically removed by the code when the page loads, and are left there for easy markers to know that you ONLY need to edit in between them!
    • NOTE: The first time you finish editing the page, the table might look odd until you refresh the page as some browsers don't like loading Javascript after trac exits edit mode, for some reason... this behavior only shows up after editing and never while viewing!

IMPROVEMENT: Could dynamically grab all tables that have class "table sorter" but currently too lazy to do the checks in javascript from the DOM. This would mean that you'd only need to add the javascript code on the page once - eat the bottom, after the standard wiki tables have been added to the DOM - but keeping the code close to each actual table text input is also useful for understanding how it works, so left as is.

Attachments (2)

Screen Shot 2016-08-18 at 10.29.51 PM.png (228.0 KB) - added by chad.trytten@… 3 years ago.
After an edit, the javascript doesn't always load - some silly error
Screen Shot 2016-08-18 at 10.30.07 PM.png (234.2 KB) - added by chad.trytten@… 3 years ago.
Everything renders correctly on a refresh, or any other normal page load

Download all attachments as: .zip

Change History (6)

Changed 3 years ago by chad.trytten@…

After an edit, the javascript doesn't always load - some silly error

Changed 3 years ago by chad.trytten@…

Everything renders correctly on a refresh, or any other normal page load

comment:1 Changed 2 years ago by Peter Suter

In 16371:

TableSorterPlugin: Make work with normal wiki tables.
Use Javascript to move tr rows containing th elements to dynamically created thead,
so jquery.tablesorter can do its magic.
Target all tables with .wiki class automatically so it "just works" without doing anything special.
(see #12850)

This also makes other normal wiki markup like links work.
(see #12624)

comment:2 Changed 2 years ago by Peter Suter

Resolution: fixed
Status: newclosed

Thanks. I adapted this idea into the plugin. Normal wiki tables should work automatically now.

comment:3 Changed 2 years ago by Peter Suter

In 16380:

TableSorterPlugin: Fix problem with multiple tables.
(see #12850)

comment:4 Changed 2 years ago by Peter Suter

In 16381:

TableSorterPlugin: Bump version to 1.1.
(see #12850)

Modify Ticket

Change Properties
Set your email in Preferences
Action
as closed The owner will remain Peter Suter.
The resolution will be deleted.

Add Comment


E-mail address and name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.