DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:sortablejs

sortablejs Plugin

Compatible with DokuWiki

  • 2024-02-06 "Kaos" yes
  • 2023-04-04 "Jack Jackrum" yes
  • 2022-07-31 "Igor" yes
  • 2020-07-29 "Hogfather" yes

plugin JavaScript for sortable tables

Last updated on
2023-04-12
Provides
Syntax
Repository
Source
Conflicts with
cellbg, infomail, tabinclude

Similar to datatables, tablelayout

Tagged with javascript, listing, sort, tables

Needed for linkmanager

Description

A JavaScript-based (client-side) plugin, which can be used to create sortable tables. It is optional for linkmanager plugin.

For server-side sorting or more robust sort facilities use Sam Wilson's sorter, based on https://github.com/Mottie/tablesorter (supports server-side sorting): https://github.com/samwilson/dokuwiki_sortablejs

Previously maintained by oiv (Otto Vainio at otto@valjakko.net)

Usage

After installing the plugin you should make sure that your DokuWiki cache is updated. This can easily be done by changing any parameter value in settings (or by doing a touch conf/local.php).

You need to set <sortable> and </sortable> tags around your table.

<sortable>
^  Col1  ^  Col3  ^  Col3      ^
|  1     | one    | 02/25/2008 |
|  2     | two    | 02/14/2008 |
</sortable>

Table initially sorted by column 1

<sortable 1>
^  Col1  ^  Col3  ^  Col3      ^
|  1     | one    | 02/25/2008 |
|  2     | two    | 02/14/2008 |
</sortable>

Table initially reverse sorted by column 1

<sortable r1>
^  Col1  ^  Col3  ^  Col3      ^
|  1     | one    | 2008-02-25 |
|  2     | two    | 2008-02-14 |
</sortable>

To sort the columns you (the page viewer) just needs to click on the correct column on the first row. A second click on the same column reverses sort.

Options

<sortable [[r]column] [sumrow[=2]] [column=alpha|numeric|date|nosort] [3phase]>

  <sortable r1 sumrow=2 3phase 1=numeric 2=alpha 3=nosort>
            ││   │        │         │       │      │
            ││   │        │         │       │      └ No sort option for column 3
            ││   │        │         │       └ Sort column 2 as text always
            ││   │        │         └ Sort column 1 as numeric always
            ││   │        └ Add a 3-phase sort option. Normal, Reverse and Back to original order.
            ││   └ Prevent last 2 rows from sort. The number can be omitted. Default is last row (=1)
            │└ Initially sort by column 1 on page load
            └ Reverse initial sort

Columns sorted as special data types

<sortable 1=alpha 2=date 3=numeric 4=numeric 5=nosort>
^ Col1 ^  Col3      ^ Col3 ^  Col4   ^  Col5   ^
| one  | 02/25/2008 | 34°C |  € 23,42| 205-8795|
| two  | 02/14/2008 | 12°C | € 193,54| 442-0026|
</sortable>

Date type is sorted, if, e.g. US american date format mm/dd/yyyy is used. The date sorting is done via Date() object, which, in theory, should work like this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format

In practice, it usually accepts legacy formats (based on browser etc.), e.g.:

  • mm-dd-yyyy
  • yyyy/mm/dd
  • mm/dd/yyyy
  • mmmm dd, yyyy
  • mmm dd, yyyy

Of course, the format yyyy-mm-dd will always be correctly sorted, when labeled as alpha and even if not labeled at all.

The implementation of type numeric is capable of cutting off units before and after numeric values. This makes it efficient to sort e.g. prices and temperature values with units attached.

plugin/sortablejs.txt · Last modified: 2024-02-08 09:11 by LMS23

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki