mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-05-29 12:04:06 +02:00
965 lines
24 KiB
HTML
965 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Examples | TableFilter</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
|
|
|
|
<!-- Bootstrap theme -->
|
|
<link href="assets/css/bootstrap-theme.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="assets/css/theme.css" rel="stylesheet">
|
|
|
|
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<!-- Fixed navbar -->
|
|
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="./">TableFilter</a>
|
|
</div>
|
|
<div class="navbar-collapse collapse">
|
|
<ul class="nav navbar-nav">
|
|
<!-- you can exclude pages using {{#isnt}} helper: {{#isnt data.title 'Blog'}} -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="active">
|
|
<a href="examples.html">Examples</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Github <b class="caret"></b></a>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<a href="https://github.com/koalyptus/TableFilter">Repo</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/koalyptus/TableFilter/wiki">Wiki</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="http://koalyptus.github.io/TableFilter/docs" target="_blank">Docs</a>
|
|
</li>
|
|
</ul>
|
|
</div><!--/.nav-collapse -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="container theme-showcase" role="main">
|
|
|
|
|
|
|
|
<h1>Examples</h1>
|
|
|
|
<p>
|
|
Browse the following examples to see <code>TableFilter</code> in action.
|
|
This library takes HTML tables to a whole new level :)
|
|
</p>
|
|
|
|
<div class="jumbotron">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">Basic</div>
|
|
<div class="list-group">
|
|
|
|
|
|
<a class="list-group-item" href="0-configuration.html">0 configuration</a>
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="alternating-rows.html">Alternating rows</a>
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="case-sensitive.html">Case sensitive match</a>
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="column-widths.html">Column widths</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="exact-match.html">Exact match</a>
|
|
|
|
|
|
|
|
<a class="list-group-item" href="exact-match-by-column.html">Exact match by column</a>
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="rows-always-visible.html">Exclude rows</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="filter-types.html">Filter types</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="highlight-keywords.html">Highlight keywords</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="no-filters.html">No filters</a>
|
|
|
|
|
|
|
|
<a class="list-group-item" href="no-headers.html">No headers</a>
|
|
|
|
|
|
|
|
<a class="list-group-item" href="no-results-message.html">No results message</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="single-filter.html">Single filter</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="watermark.html">Watermark</a>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">Features</div>
|
|
<div class="list-group">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="auto-filter.html">Auto filter, filter as you type behaviour</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="custom-filtering.html">Custom column filtering</a>
|
|
|
|
|
|
|
|
<a class="list-group-item" href="data-types.html">Data types, column operations</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="grid-layout.html">Grid layout</a>
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="grouped-headers.html">Grouped headers</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="linked-filters.html">Linked filters</a>
|
|
|
|
|
|
|
|
<a class="list-group-item" href="linked-filters-greyed-out-options.html">Linked filters with greyed-out options</a>
|
|
|
|
|
|
|
|
<a class="list-group-item" href="load-filters-on-demand.html">Load filters on demand</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="paging.html">Paging</a>
|
|
|
|
|
|
|
|
<a class="list-group-item" href="popup-filters.html">Pop-up filters</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">Extensions</div>
|
|
<div class="list-group">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="column-calculations.html">Column calculations</a>
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="columns-visibility.html">Columns visibility extension</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="advanced-grid-editable.html">Editable grid</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="filters-visibility.html">Filters visibility extension</a>
|
|
|
|
|
|
|
|
<a class="list-group-item" href="filters-visibility-external-toggle.html">Filters visibility extension with external toggle button</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="advanced-grid-selection.html">Selectable grid</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="sort.html">Sort</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">API</div>
|
|
<div class="list-group">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="external-filter-operators.html">External filter operators</a>
|
|
|
|
|
|
|
|
<a class="list-group-item" href="external-filters.html">External filters generation</a>
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="extract-data-apis.html">Extracting data APIs</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="sort-custom-type.html">Sort a custom column type</a>
|
|
|
|
|
|
|
|
<a class="list-group-item" href="sort-columns-external-command.html">Sort columns with external command</a>
|
|
|
|
|
|
|
|
<a class="list-group-item" href="theme-roller.html">Theme roller</a>
|
|
|
|
|
|
|
|
<a class="list-group-item" href="toggle-features.html">Toggle features</a>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">Customisation</div>
|
|
<div class="list-group">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="external-toolbar.html">External toolbar</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="grid-layout-custom-css.html">Grid layout with custom styles</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">Advanced</div>
|
|
<div class="list-group">
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="alphabetical-pager.html">Alphabetical pager</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="list-group-item" href="filter-images.html">Filter and sort column with images</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Usage</h2>
|
|
<h3>Global</h3>
|
|
<p>
|
|
Import the main js file in your page, from desired location or for example
|
|
from the default NPM location if you downloaded the package from NPM:
|
|
</p>
|
|
<pre><script src="node_modules/tablefilter/dist/tablefilter/tablefilter.js"></script></pre>
|
|
<p>
|
|
This will expose the <code>TableFilter</code> global function as shown in
|
|
example below.
|
|
</p>
|
|
|
|
<!-- CODEPEN -->
|
|
<p data-height="446" data-theme-id="0" data-slug-hash="wKBOLp" data-default-tab="result" data-user="koalyptus" class='codepen'>See the Pen <a href='http://codepen.io/koalyptus/pen/wKBOLp/'>TableFilter starter</a> by Max (<a href='http://codepen.io/koalyptus'>@koalyptus</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
|
|
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
|
|
|
|
<h3>Module</h3>
|
|
<p>
|
|
<code>TableFilter</code> can also be imported as a module and used in those
|
|
projects following a module pattern as AMD or CommonJS:
|
|
<div class="list-group">
|
|
<a href="setup-requirejs.html" class="list-group-item">
|
|
Setup with RequireJS
|
|
</a>
|
|
<a href="setup-systemjs.html" class="list-group-item">
|
|
Setup with SystemJS
|
|
</a>
|
|
</div>
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<nav class="navbar navbar-default navbar-bottom">
|
|
<div class="container">
|
|
<ul class="nav navbar-nav">
|
|
<li>
|
|
<a href="https://github.com/koalyptus/TableFilter">Repo</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/koalyptus/TableFilter/wiki">Wiki</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://koalyptus.github.io/TableFilter/docs" target="_blank">Docs</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li>
|
|
<p>
|
|
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
|
|
<input type="hidden" name="cmd" value="_donations">
|
|
<input type="hidden" name="business" value="maxgug@hotmail.com">
|
|
<input type="hidden" name="lc" value="BM">
|
|
<input type="hidden" name="item_name" value="TableFilter">
|
|
<input type="hidden" name="no_note" value="0">
|
|
<input type="hidden" name="currency_code" value="USD">
|
|
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHosted">
|
|
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
|
|
<img alt="" border="0" src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" width="1" height="1">
|
|
</form>
|
|
</p>
|
|
</li>
|
|
<li>
|
|
|
|
<a href="https://flattr.com/submit/auto?user_id=koalyptus&
|
|
url=https%3A%2F%2Fgithub.com%2Fkoalyptus%2FTablefilter">
|
|
<img src="https://api.flattr.com/button/flattr-badge-large.png"
|
|
alt="TableFilter - A Javascript library making HTML tables filterable
|
|
and a bit more" />
|
|
</a>
|
|
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
|
<script src="https://code.jquery.com/jquery.min.js"></script>
|
|
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
|
<script src="assets/js/bootstrap.min.js"></script>
|
|
|
|
<script src="assets/js/github-fork-me.js"></script>
|
|
|
|
|
|
<script type="text/javascript"
|
|
src="//s7.addthis.com/js/300/addthis_widget.js#pubid=maxgug"
|
|
async="async"></script>
|
|
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-68429903-1', 'auto');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
</body>
|
|
</html>
|