{sortable:selector:options}

Description

Turns an HTML table into one the visitor can sort by clicking its column headers, entirely in the browser. The expression itself prints nothing - it loads the small plain.sortable JavaScript library plus its stylesheet and runs the sorter against the tables matching selector. selector is a CSS selector and defaults to table.sortable, so giving your table the class sortable and writing the bare expression is enough; pass a selector like #prices or table.report to target specific tables. For the library to be injected the site module page must contain the generate HEAD and generate FOOT markers (those emit the queued scripts and styles). A second options argument appears in the signature for forward compatibility but the current version ignores it - sorting uses the library defaults. Because the work happens client-side, sorting reorders only the rows already on the page; it does not re-query the database or change which items a view selects.

Parameters

selector optional default table.sortable

CSS selector for the table or tables to make sortable. Any selector works: a class (table.sortable), an id (#prices), or an element (table). The library attaches click-to-sort handlers to the column headers of every matching table.

options optional default (ignored)

Reserved for a future JSON options string. The current version accepts it in the syntax but ignores it - sorting always uses the library defaults. Leave it out.

Examples

test[{sortable}]

Expected[]

Actual[]

The bare expression makes every table with the CSS class sortable clickable to sort. It prints nothing - its job is to queue the JavaScript library. Wrapped in brackets here so the empty output is visible and testable.

test[{sortable:table.report}]

Expected[]

Actual[]

Pass a CSS selector to choose which tables become sortable. Here only tables with class report are affected. Output is still empty.

test[{sortable:#prices}]

Expected[]

Actual[]

An id selector enhances a single table (the one with id prices). Use this when a page has several tables and only one should sort.

test[{sortable:table.sortable:somejson}]

Expected[]

Actual[]

A second argument is accepted for forward compatibility but the current version ignores it - the result is identical to passing only the selector. No error, just empty output.

virtual

<table class="sortable"><tr><th>Name</th><th>Members</th></tr><tr><td>Alpha</td><td>14</td></tr><tr><td>Beta</td><td>42</td></tr></table>{sortable}

Expected(a sortable HTML table; the expression adds the click-to-sort behaviour)

Actual

Name	Members
Alpha	14
Beta	42

The usual recipe: give the table the class sortable, print the table, and add the bare expression once. On a real site module page (with the generate HEAD and generate FOOT markers present) the visitor can then click Name or Members to sort. Shown as illustrative because the output is live HTML, not a fixed string.

← All expressions