====== searchtablejs Plugin ======

---- plugin ----
description: Filter tables in DokuWiki based on JavaScript
author     : Robert Henjes
email      : robert.henjes@gmx.net 
type       : syntax
lastupdate : 2018-10-12
compatible : Lemming, Anteater, Rincewind, Angua, Adora Belle, Weatherwax, Binky, Ponder Stibbons, Hrun, Detritus, Elenor of Tsort, Frusterick Manners, Greebo, Hogfather, Igor, "Jack Jackrum", Kaos
depends    : 
conflicts  : edittable
similar    : datatables, tablelayout
tags       : javascript, filter, search, tables

downloadurl: https://github.com/xdreamer/searchtablejs/zipball/master
bugtracker : https://github.com/xdreamer/searchtablejs/issues
sourcerepo : https://github.com/xdreamer/searchtablejs/
donationurl: 
----

===== Download and Installation =====

Search and install the plugin using the [[plugin:extension|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:
<code>
<searchtable>
^ Test ^ Col1 ^ Col2 ^
| Row1 | Val1 | Val2 |
| Row2 | Val3 | Val4 |
</searchtable>
</code>

Example with sortable (you can combine it):
<code>
<searchtable>
<sortable>
^ Test ^ Col1 ^ Col2 ^
| Row1 | Val1 | Val2 |
| Row2 | Val3 | Val4 |
</sortable>
</searchtable>
</code>
===== 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 =====

{{rss>https://github.com/xdreamer/searchtablejs/commits/master.atom date}}

===== Improvement =====

A little improvement to give the Input a class-name

<code>
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
</code>

  * 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:
<code>
...
  getTableByID: function(_id) {
        var _table = document.getElementById(_id).getElementsByTagName('table')[0];
        return _table;
  },
...
</code>

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

<code>
...
  getTableByID: function(_id) {
        var _table = document.getElementById(_id).getElementsByTagName('table')[0];
        return _table;
  }
...
</code>
--- //[[aages@imr.no|Strand Åge]] 2011/01/26 13:35//



===== Conflict with EditTable plugin =====

How to resolve the conflict with [[plugin:edittable|EditTable plugin]]?

--- //[[loyer.pd@gmail.com|loyer]] 2014/06/14 17:24//

Download the newest version, there is a fix now.

 --- [[user>LMS23|LMS23]] //2015-03-18 11:25//

Really good plugin. Would be nice if it worked for every table in a page. --- [[user>markkrj|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//