mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-05-21 07:46:42 +02:00
276 lines
30 KiB
HTML
276 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="refresh" content="0;URL='http://www.tablefilter.com/docs/'" />
|
|
<base data-ice="baseUrl">
|
|
<title data-ice="title">Home | tablefilter</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>
|
|
<meta name="description" content="A Javascript library making HTML tables filterable and a bit more"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="tablefilter"><meta property="twitter:description" content="A Javascript library making HTML tables filterable and a bit more"></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>
|
|
|
|
<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>
|
|
<a style="position:relative; top:3px;" href="https://github.com/koalyptus/TableFilter.git"><img width="20px" src="./image/github.png"></a></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/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/tablefilter.js~TableFilter.html">TableFilter</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-has">has</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-addClass">addClass</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-createCheckItem">createCheckItem</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-createElm">createElm</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-createOpt">createOpt</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-createText">createText</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-elm">elm</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getFirstTextNode">getFirstTextNode</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getText">getText</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-hasClass">hasClass</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-removeClass">removeClass</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-removeElm">removeElm</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-tag">tag</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-addEvt">addEvt</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-cancelEvt">cancelEvt</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isKeyPressed">isKeyPressed</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-keyCode">keyCode</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-removeEvt">removeEvt</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-stopEvt">stopEvt</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-targetEvt">targetEvt</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-parse">parse</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-defaultsArr">defaultsArr</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-defaultsBool">defaultsBool</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-defaultsFn">defaultsFn</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-defaultsNb">defaultsNb</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-defaultsStr">defaultsStr</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-dateSortAsc">dateSortAsc</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-dateSortDesc">dateSortDesc</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-ignoreCase">ignoreCase</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-numSortAsc">numSortAsc</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-numSortDesc">numSortDesc</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-sortDateStr">sortDateStr</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-sortNumberStr">sortNumberStr</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-contains">contains</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isEmpty">isEmpty</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-matchCase">matchCase</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-rgxEsc">rgxEsc</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-trim">trim</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-EMPTY_FN">EMPTY_FN</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isArray">isArray</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isBoolean">isBoolean</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isEmpty">isEmpty</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isFn">isFn</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isNull">isNull</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isNumber">isNumber</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isObj">isObj</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isString">isString</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isUndef">isUndef</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-AUTO_FILTER_DELAY">AUTO_FILTER_DELAY</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-CELL_TAG">CELL_TAG</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-CHECKLIST">CHECKLIST</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-DATE">DATE</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-DOWN_ARROW_KEY">DOWN_ARROW_KEY</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-ENTER_KEY">ENTER_KEY</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-ESC_KEY">ESC_KEY</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-FEATURES">FEATURES</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-FORMATTED_NUMBER">FORMATTED_NUMBER</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-HEADER_TAG">HEADER_TAG</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-INPUT">INPUT</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-IP_ADDRESS">IP_ADDRESS</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-MULTIPLE">MULTIPLE</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-NONE">NONE</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-NUMBER">NUMBER</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-SELECT">SELECT</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-STRING">STRING</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-TAB_KEY">TAB_KEY</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-UP_ARROW_KEY">UP_ARROW_KEY</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-root">root</a></span></span></li>
|
|
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#extensions-advancedgrid">extensions/advancedGrid</a><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"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#extensions-colops">extensions/colOps</a><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"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#extensions-colsvisibility">extensions/colsVisibility</a><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"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#extensions-filtersvisibility">extensions/filtersVisibility</a><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"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#extensions-sort">extensions/sort</a><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"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#modules">modules</a><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/baseDropdown.js~BaseDropdown.html">BaseDropdown</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/dateType.js~DateType.html">DateType</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/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/markActiveColumns.js~MarkActiveColumns.html">MarkActiveColumns</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/storage.js~Storage.html">Storage</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/toolbar.js~Toolbar.html">Toolbar</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-hasHashChange">hasHashChange</a></span></span></li>
|
|
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-hasStorage">hasStorage</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-CENTER">CENTER</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-LEFT">LEFT</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-RIGHT">RIGHT</a></span></span></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="content" data-ice="content"><div data-ice="index" class="github-markdown"><p><a href="https://travis-ci.org/koalyptus/TableFilter"><img src="https://api.travis-ci.org/koalyptus/TableFilter.svg?branch=master" alt="Build Status"></a>
|
|
<a href="https://koalyptus.github.io/TableFilter/docs/source.html"><img src="https://koalyptus.github.io/TableFilter/docs/badge.svg" alt="Document"></a>
|
|
<a href="https://codecov.io/gh/koalyptus/TableFilter"><img src="https://codecov.io/gh/koalyptus/TableFilter/branch/master/graph/badge.svg" alt="codecov"></a>
|
|
<a href="https://greenkeeper.io/"><img src="https://badges.greenkeeper.io/koalyptus/TableFilter.svg" alt="Greenkeeper badge"></a></p>
|
|
<h1 id="tablefilter">TableFilter</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 "filter by column" 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 capabilities</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 features...</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>Exhaustive documentation and poweful 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 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>TableFilter is available on <a href="https://www.npmjs.com/package/tablefilter">npm repository</a>, you can install it from the command line using the following command:</p>
|
|
<pre><code class="lang-shell"><code class="source-code prettyprint">npm install tablefilter --save-dev</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-dev</code>
|
|
</code></pre>
|
|
</li>
|
|
<li>Alternatively you can also <a href="https://unpkg.com/tablefilter/">access these files from unpkg CDN</a>, download them or point your package manager to them.</li>
|
|
</ul>
|
|
<h2 id="setup">Setup</h2><h3 id="using-modules">Using modules</h3><p>Require <code>TableFilter</code>:</p>
|
|
<pre><code class="lang-javascript"><code class="source-code prettyprint">// ES2015 modules
|
|
import TableFilter from 'tablefilter';
|
|
|
|
// CommonJS or AMD modules
|
|
var TableFilter = require('tablefilter');</code>
|
|
</code></pre>
|
|
<h3 id="using-distribution-scripts">Using distribution scripts</h3><p>If you are not using a module system, you can reference the distribution scripts directly in your html pages:</p>
|
|
<pre><code class="lang-html"><code class="source-code prettyprint"><script src="path_to/node_modules/tablefilter/dist/tablefilter/tablefilter.js"></script></code>
|
|
</code></pre>
|
|
<h3 id="placing-manually-the-distribution-scripts-in-your-project">Placing manually the distribution scripts in your project</h3><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"><script src="path/to/my/scripts/tablefilter/tablefilter.js"></script></code>
|
|
</code></pre>
|
|
<h3 id="usage">Usage</h3><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"><script>
|
|
var tf = new TableFilter(document.querySelector('.my-table'), {
|
|
base_path: 'path/to/my/scripts/tablefilter/'
|
|
});
|
|
tf.init();
|
|
</script></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
|
|
|— 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> v8.9.4 or higher</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</p>
|
|
<pre><code class="lang-shell"><code class="source-code prettyprint">npm run dev</code>
|
|
</code></pre>
|
|
<p>command to launch a build / watch cycle and start the local
|
|
sever on port <code>8080</code>.</p>
|
|
<p>Use</p>
|
|
<pre><code class="lang-shell"><code class="source-code prettyprint">npm run build</code>
|
|
</code></pre>
|
|
<p>command to generate a production build.</p>
|
|
<p>The</p>
|
|
<pre><code class="lang-shell"><code class="source-code prettyprint">npm run dist</code>
|
|
</code></pre>
|
|
<p>command will create a production build, run the tests and finally generate
|
|
the demos:</p>
|
|
<p>To run all the tests and generate the coverage report:</p>
|
|
<pre><code class="lang-shell"><code class="source-code prettyprint">npm test</code>
|
|
</code></pre>
|
|
<p>or 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>
|
|
<p>to view the coverage report(s), open the <code>index.html</code> under the
|
|
<code>report/coverage</code> folder or
|
|
<a href="https://codecov.io/gh/koalyptus/TableFilter">online</a>.</p>
|
|
<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">npm run build:demos</code>
|
|
</code></pre>
|
|
<p>then run the local webserver:</p>
|
|
<pre><code class="lang-shell"><code class="source-code prettyprint">npm start</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>If you previously used the HTML Table Filter Generator plugin, verify the configuration
|
|
options you are using are still supported: <a href="https://github.com/koalyptus/TableFilter/wiki/Obsolete">Obsolete</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">npm run esdoc</code>
|
|
</code></pre>
|
|
<h2 id="support">Support</h2><ul>
|
|
<li>GitHub for <a href="https://github.com/koalyptus/TableFilter/blob/master/CONTRIBUTING.md#reporting-bugs">reporting bugs</a> and <a href="https://github.com/koalyptus/TableFilter/blob/master/CONTRIBUTING.md#suggesting-enhancements-and-features">feature requests</a>.</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">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></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>
|