searchtablejs 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

Filter tables in DokuWiki based on JavaScript

Last updated on: 2024-06-12
Provides: Syntax
Repository: Source
Conflicts with: edittable

Similar to datatables, tablelayout

Tagged with filter, javascript, search, tables

By Robert Henjes

Download and Installation

Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.

Syntax and Usage

This script can be used the same way as the Sortablejs Plugin. It adds a small text field on top of your table and filters for the entered text. Esp. in combination with the CSV Plugin this small plugin is very useful.

Example:

<searchtable>
^ Test ^ Col1 ^ Col2 ^
| Row1 | Val1 | Val2 |
| Row2 | Val3 | Val4 |
</searchtable>

Example with sortable (you can combine it):

<searchtable>
<sortable>
^ Test ^ Col1 ^ Col2 ^
| Row1 | Val1 | Val2 |
| Row2 | Val3 | Val4 |
</sortable>
</searchtable>

Known Issues

Currently only one table per searchtable tag is supported. But you can use multiple tags per page.
No further options are supported at the moment, but planned. Stay tuned.

TODO

Switch filter code to: http://www.javascriptkit.com/script/script2/tablefilter.shtml

Changes

Merge pull request #22 from LMS235/patch-1 (2024-06-19 08:12)
Update plugin.info.txt (2024-06-18 08:23)
Merge pull request #20 from gregoryloichot/master (2024-06-11 18:59)
Remove deprecated instruction (2024-05-28 16:10)
Merge pull request #16 from LMS235/patch-1 (2019-04-06 10:48)
Update plugin.info.txt (2019-02-15 09:08)
Merge pull request #12 from splitbrain-forks/php7-signature (2018-10-12 17:02)
Adjust method signatures to match parent (2016-01-24 13:28)

Improvement

A little improvement to give the Input a class-name

In syntax.php:

$renderer->doc .= '<div class="searchtable' . $match . '" id="' . $id . '">';
$renderer->doc .= '<form class="searchtable" onsubmit="return false;"><input class="searchtable" name="filtertable" onkeyup="searchtable.filterall(this, \'' . $id . '\')" type="text"></form>';


A new File: print.css

div.dokuwiki form.searchtable { display: none; }


A new File: style.css

what you like, similar to the text search input

It would be cool if you can select the column with should be filtered
Not working with latest DokuWiki and Template Arctic

Problem with IE8

IE8 has a different opinion than other browsers as to how a javascript array should be ended, so it barfs on this script.js code snippet:

...
  getTableByID: function(_id) {
        var _table = document.getElementById(_id).getElementsByTagName('table')[0];
        return _table;
  },
...

Remove the trailing comma after the last array entry, and presto!

...
  getTableByID: function(_id) {
        var _table = document.getElementById(_id).getElementsByTagName('table')[0];
        return _table;
  }
...

— Strand Åge 2011/01/26 13:35

Conflict with EditTable plugin

How to resolve the conflict with EditTable plugin?

— loyer 2014/06/14 17:24

Download the newest version, there is a fix now.

— LMS23 2015-03-18 11:25

Really good plugin. Would be nice if it worked for every table in a page. — markkrj 2016-06-30 23:10

Would be nice if there was a reset button after the searchbox.
BTW, works great with Frusterick Manners

— dokufan030 2017-03-09 05:54

Table of Contents