deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2026-03-16 07:35:45 +01:00
Code Issues Releases Wiki Activity
TableFilter/docs/index.html
koalyptus 62795a731f publish Docs to gh-pages (auto) 
branch:       master
SHA:          786d4cb476
range SHA:    07c5ae827d5d...786d4cb476be
build id:     117336859
build number: 224
2016-03-20 22:41:03 +00:00

186 lines
13 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base data-ice="baseUrl">
<title data-ice="title">tablefilter v0.2.1 API Document</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
<script src="script/prettify/prettify.js"></script>
<script src="script/manual.js"></script>
</head>
<body class="layout-container" data-ice="rootContainer">
<header>
<a href="./">Home</a>
<a href="identifiers.html">Reference</a>
<a href="source.html">Source</a>
<a data-ice="repoURL" href="https://github.com/koalyptus/TableFilter.git" class="repo-url-github">Repository</a>
<div class="search-box">
<span>
<img src="./image/search.png">
<span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
</span>
<ul class="search-result"></ul>
</div>
</header>
<nav class="navigation" data-ice="nav"><div>
<ul>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/emitter.js~Emitter.html">Emitter</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/tablefilter.js~TableFilter.html">TableFilter</a></span></span></li>
<li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">extensions/advancedGrid</div><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/extensions/advancedGrid/adapterEzEditTable.js~AdapterEzEditTable.html">AdapterEzEditTable</a></span></span></li>
<li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">extensions/colOps</div><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/extensions/colOps/colOps.js~ColOps.html">ColOps</a></span></span></li>
<li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">extensions/colsVisibility</div><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/extensions/colsVisibility/colsVisibility.js~ColsVisibility.html">ColsVisibility</a></span></span></li>
<li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">extensions/filtersVisibility</div><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/extensions/filtersVisibility/filtersVisibility.js~FiltersVisibility.html">FiltersVisibility</a></span></span></li>
<li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">extensions/sort</div><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/extensions/sort/adapterSortabletable.js~AdapterSortableTable.html">AdapterSortableTable</a></span></span></li>
<li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">modules</div><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/alternateRows.js~AlternateRows.html">AlternateRows</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/checkList.js~CheckList.html">CheckList</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/clearButton.js~ClearButton.html">ClearButton</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/dropdown.js~Dropdown.html">Dropdown</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/feature.js~Feature.html">Feature</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/gridLayout.js~GridLayout.html">GridLayout</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/hash.js~Hash.html">Hash</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/help.js~Help.html">Help</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/highlightKeywords.js~HighlightKeyword.html">HighlightKeyword</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/loader.js~Loader.html">Loader</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/noResults.js~NoResults.html">NoResults</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/paging.js~Paging.html">Paging</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/popupFilter.js~PopupFilter.html">PopupFilter</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/rowsCounter.js~RowsCounter.html">RowsCounter</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/state.js~State.html">State</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/statusBar.js~StatusBar.html">StatusBar</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/modules/store.js~Store.html">Store</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-hasHashChange">hasHashChange</a></span></span></li>
</ul>
</div>
</nav>
<div class="content" data-ice="content"><div data-ice="index" class="github-markdown"><h1 id="tablefilter-build-status-https-api-travis-ci-org-koalyptus-tablefilter-svg-branch-master-https-travis-ci-org-koalyptus-tablefilter-">TableFilter <a href="https://travis-ci.org/koalyptus/TableFilter"><img src="https://api.travis-ci.org/koalyptus/TableFilter.svg?branch=master" alt="Build Status"></a></h1>
<blockquote>
<p>A Javascript library making HTML tables filterable</p>
</blockquote>
<p>TableFilter is a modernised version of the <a href="http://tablefilter.free.fr">HTML Table Filter generator</a> javascript plugin.
This library adds to any html table a &quot;filter by column&quot; feature that enables
users to filter and limit the data displayed within a long table. By default, the script automatically adds a filter grid bar at the top of the desired table.</p>
<h2 id="features">Features</h2>
<ul>
<li>Convert a regular HTML table into an advanced grid component providing:<ul>
<li>Advanced columns filtering model</li>
<li>Sorting and pagination facilities</li>
<li>Complete selection model (<a href="http://codecanyon.net/item/ezedittable-enhance-html-tables/2425123?ref=koalyptus">ezEditTable</a> extension)</li>
<li>Extended keyboard navigation (<a href="http://codecanyon.net/item/ezedittable-enhance-html-tables/2425123?ref=koalyptus">ezEditTable</a> extension)</li>
<li>Inline cell or row editing (<a href="http://codecanyon.net/item/ezedittable-enhance-html-tables/2425123?ref=koalyptus">ezEditTable</a> extension)</li>
<li>Row insertion or deleting (<a href="http://codecanyon.net/item/ezedittable-enhance-html-tables/2425123?ref=koalyptus">ezEditTable</a> extension)</li>
<li>And even more behaviors...</li>
</ul>
</li>
<li>Attach to an existing HTML table</li>
<li>Integration with any server-side technology as this is a pure client-side
solution</li>
<li>Callbacks for all events, and delegates for most actions</li>
<li>Exhaustive documentation and API</li>
</ul>
<h2 id="getting-started">Getting started</h2>
<ul>
<li><p>Clone the repo using Git:</p>
<pre><code class="lang-shell"><code class="source-code prettyprint">git clone --bare https://github.com/koalyptus/TableFilter.git</code>
</code></pre>
</li>
<li><p>You can <a href="https://github.com/koalyptus/TableFilter/archive/master.zip">download</a> this repository.</p>
</li>
<li><p>Alternatively, install TableFilter files in your npm enabled project using:</p>
<pre><code class="lang-shell"><code class="source-code prettyprint">npm install tablefilter --save</code>
</code></pre>
</li>
<li>or get the future features from the <code>next</code> release channel:<pre><code class="lang-shell"><code class="source-code prettyprint">npm install tablefilter@next --save</code>
</code></pre>
</li>
</ul>
<h2 id="setup">Setup</h2>
<p>Copy the <code>tablefilter</code> directory under <code>dist</code> and place it at desired location in your project. Then include the main js file in your page:</p>
<pre><code class="lang-shell"><code class="source-code prettyprint">&lt;script src=&quot;path/to/my/scripts/tablefilter/tablefilter.js&quot;&gt;&lt;/script&gt;</code>
</code></pre>
<p>Place the following snippet just under the HTML table and always define a <code>base_path</code> property in the configuration object to reflect the path to the script</p>
<pre><code class="lang-shell"><code class="source-code prettyprint">&lt;script&gt;
var tf = new TableFilter(document.querySelector(&apos;.my-table&apos;), {
base_path: &apos;path/to/my/scripts/tablefilter/&apos;
});
tf.init();
&lt;/script&gt;</code>
</code></pre>
<p>If the <code>base_path</code> property is not specified, it will default to <code>/tablefilter</code> directory:</p>
<pre><code class="lang-shell"><code class="source-code prettyprint">your-page.html
|&#x2014; tablefilter</code>
</code></pre>
<h2 id="development">Development</h2>
<p>This project requires node.js and Grunt to be installed:</p>
<ul>
<li>install <a href="https://nodejs.org/">node.js</a></li>
<li>install <a href="http://gruntjs.com/getting-started">Grunt</a> from the command line using npm (comes with node.js):<pre><code class="lang-shell"><code class="source-code prettyprint">npm install -g grunt-cli</code>
</code></pre>
Once <code>Grunt</code> is sorted out you can follow the instructions below.
Start by installing any dependencies.</li>
</ul>
<pre><code class="lang-shell"><code class="source-code prettyprint">npm install</code>
</code></pre>
<p>Use the Grunt <code>dev</code> task to launch a build / watch cycle and start the local
sever on port <code>8080</code>:</p>
<pre><code class="lang-shell"><code class="source-code prettyprint">grunt dev</code>
</code></pre>
<p>Use the <code>build</code> task to generate a production build:</p>
<pre><code class="lang-shell"><code class="source-code prettyprint">grunt build</code>
</code></pre>
<p>The <code>default</code> Grunt task will create a production build, run the tests and finally generate the demos:</p>
<pre><code class="lang-shell"><code class="source-code prettyprint">grunt</code>
</code></pre>
<p>To run all the tests:</p>
<pre><code class="lang-shell"><code class="source-code prettyprint">grunt test</code>
</code></pre>
<p>and to run specific test(s):</p>
<pre><code class="lang-shell"><code class="source-code prettyprint">grunt test-only:test.html
grunt test-only:test.html,test-sort.html</code>
</code></pre>
<h2 id="demos">Demos</h2>
<p>Check out the online <a href="http://koalyptus.github.io/TableFilter/examples">examples</a> or generate the demos locally:</p>
<pre><code class="lang-shell"><code class="source-code prettyprint">grunt build-demos</code>
</code></pre>
<p>then run the local webserver:</p>
<pre><code class="lang-shell"><code class="source-code prettyprint">grunt server</code>
</code></pre>
<p>then pick a demo from:</p>
<pre><code class="lang-shell"><code class="source-code prettyprint">http://localhost:8080/demos/</code>
</code></pre>
<h2 id="documentation">Documentation</h2>
<p>Find exhaustive documentation on the configuration options in the <a href="https://github.com/koalyptus/TableFilter/wiki">WIKI</a> section.</p>
<p>Autogenerated documentation of the ES6 modules is available on the website: <a href="http://koalyptus.github.io/TableFilter/docs">docs</a></p>
<p>Run this task to generate the documentation in the <code>docs/docs</code> directory:</p>
<pre><code class="lang-shell"><code class="source-code prettyprint">grunt esdoc</code>
</code></pre>
<h2 id="support">Support</h2>
<ul>
<li>GitHub for reporting bugs and feature requests.</li>
</ul>
<h2 id="license">License</h2>
<p><a href="LICENSE">MIT</a></p>
</div>
</div>
<footer class="footer">
Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(0.4.6)</span></a>
</footer>
<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink