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

[chad.trytten@…]

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.

[chad.trytten@…]

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

[chad.trytten@…]

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

[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)

[Peter Suter]

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

[Peter Suter]

In 16380:

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

[Peter Suter]

In 16381:

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