datatable: nicer example, test case for filter on multiple tables - jscancer - Javascript crap (relatively small)
(HTM) git clone git://git.codemadness.org/jscancer
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
(DIR) commit 826deb929da361777061f017b18bc4d06369c564
(DIR) parent 9bbea8b7fea3becef11b06af62d7e4426e5f96fd
(HTM) Author: Hiltjo Posthuma <hiltjo@codemadness.org>
Date: Fri, 25 Aug 2017 15:13:08 +0200
datatable: nicer example, test case for filter on multiple tables
Diffstat:
M datatable/example-ajax.html | 1 +
M datatable/example.html | 128 ++++++++++++++++++++-----------
A datatable/test.html | 133 +++++++++++++++++++++++++++++++
3 files changed, 219 insertions(+), 43 deletions(-)
---
(DIR) diff --git a/datatable/example-ajax.html b/datatable/example-ajax.html
@@ -8,6 +8,7 @@
<body>
<input type="search" class="filter-text" value="" placeholder="Filter..." autofocus="autofocus" /><br/>
+<br/>
<!--<table id="datatable" class="datatable" style="display: none" data-lazyscroll="1" cellpadding="0" cellspacing="0" border="0">-->
<table id="datatable" class="datatable" cellpadding="0" cellspacing="0" border="0">
(DIR) diff --git a/datatable/example.html b/datatable/example.html
@@ -4,73 +4,115 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jsdatatable</title>
<link rel="stylesheet" type="text/css" href="datatable.css" />
+ <style type="text/css">
+ th { text-align: left; }
+ .a-r { text-align: right; }
+ .no-stock { background-color: #ffcccc; }
+ </style>
</head>
<body>
<input type="search" class="filter-text" value="" placeholder="Filter..." autofocus="autofocus" /><br/>
+<br/>
-<!--<table id="datatable" class="datatable" style="display: none" data-lazyscroll="1" cellpadding="0" cellspacing="0" border="0">-->
<table id="datatable" class="datatable" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
- <th data-parse="int">#</th>
- <th data-parse="int" data-sortable="false" class="sort-disabled">Disabled sort</th>
- <th data-parse="float"></th>
- <th data-parse="float">€</th>
- <th data-filterable="false" data-parse="int">numbers<br/>(disabled filter)</th>
- <th>Description</th>
- <th data-parse="int">yyyy-mm-dd</th>
+<th class="a-r" data-parse="int">ID</th>
+<th>Manufacturer</th>
+<th>Model</th>
+<th class="a-r" data-parse="int">Cores</th>
+<th class="a-r sort-disabled" data-sortable="false" data-parse="float">GHZ (disabled sort)</th><!-- disabled sort -->
+<th>SKU</th>
+<th class="a-r" data-parse="int">EAN</th>
+<th class="a-r" data-parse="int">Stock</th>
+<th class="a-r" data-parse="float">Price</th>
</tr>
</thead>
<tbody>
<tr>
- <td>1</td>
- <td>2</td>
- <td>4</td>
- <td data-value="57.49">€ 57,49</td>
- <td data-value="2">two</td>
- <td>Test description 1</td>
- <td data-value="19700101">1970-01-01</td>
+<td class="a-r">1</td>
+<td>Intel</td>
+<td>Core i7-7700k</td>
+<td class="a-r">4</td>
+<td class="a-r">4.2</td>
+<td>BX80677I77700K</td>
+<td class="a-r">5032037092562</td>
+<td class="a-r">5</td>
+<td class="a-r" data-value="332.2">€ 332.20</td>
</tr>
+
+<tr>
+<td class="a-r">2</td>
+<td>Intel</td>
+<td>Core i9-7900k</td>
+<td class="a-r">10</td>
+<td class="a-r">3.3</td>
+<td>BX80673I97900X</td>
+<td class="a-r">5032037104791</td>
+<td class="a-r no-stock">0</td>
+<td class="a-r" data-value="969.95">€ 969.95</td>
+</tr>
+
+<tr>
+<td class="a-r">3</td>
+<td>AMD</td>
+<td>Ryzen 7 1700</td>
+<td class="a-r">8</td>
+<td class="a-r">3</td>
+<td>YD1700BBAEBOX</td>
+<td class="a-r">0730143308328</td>
+<td class="a-r">3</td>
+<td class="a-r" data-value="300.95">€ 300.95</td>
+</tr>
+
<tr>
- <td>2</td>
- <td>3</td>
- <td>2</td>
- <td data-value="69.1">€ 69,10</td>
- <td data-value="1">one</td>
- <td>Test description 2</td>
- <td data-value="19690101">1969-01-01</td>
+<td class="a-r">4</td>
+<td>AMD</td>
+<td>Ryzen 7 1800x</td>
+<td class="a-r">8</td>
+<td class="a-r">3.6</td>
+<td>YD180XBCAEWOF</td>
+<td class="a-r">0730143308366</td>
+<td class="a-r">4</td>
+<td class="a-r" data-value="450.95">€ 450.95</td>
</tr>
+
<tr>
- <td>3</td>
- <td>1</td>
- <td>2</td>
- <td data-value="69.1">€ 69,10</td>
- <td data-value="1">One</td>
- <td>Test description 3</td>
- <td data-value="19690101">1969-01-01</td>
+<td class="a-r">5</td>
+<td>AMD</td>
+<td>Ryzen 7 1700x</td>
+<td class="a-r">8</td>
+<td class="a-r">3.4</td>
+<td>YD170XBCAEWOF</td>
+<td class="a-r">0730143308342</td>
+<td class="a-r">12</td>
+<td class="a-r" data-value="339.95">€ 339.95</td>
</tr>
+
<tr>
- <td>4</td>
- <td>1</td>
- <td>2</td>
- <td data-value="69.1">€ 69,10</td>
- <td data-value="2">Two</td>
- <td>Test description 4</td>
- <td data-value="19690101">1969-01-01</td>
+<td class="a-r">6</td>
+<td>Intel</td>
+<td>Core i5-7600k</td>
+<td class="a-r">4</td>
+<td class="a-r">3.8</td>
+<td>BX80677I57600K</td>
+<td class="a-r">0675901428682</td>
+<td class="a-r">22</td>
+<td class="a-r" data-value="229">€ 229.00</td>
</tr>
+
</tbody>
+
<tfoot>
<tr>
- <td>This</td>
- <td>is</td>
- <td>not</td>
- <td>sorted</td>
- <td>or</td>
- <td>parsed</td>
- <td>.</td>
+<td></td>
+<td colspan="6">Footer...</td>
+<td class="a-r" data-value="46">Total: 46</td>
+<td></td>
</tr>
</tfoot>
+
</table>
<noscript>
(DIR) diff --git a/datatable/test.html b/datatable/test.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <title>jsdatatable</title>
+ <link rel="stylesheet" type="text/css" href="datatable.css" />
+</head>
+<body>
+
+<h2>Table 1</h2>
+
+<!-- div is a container to filter datatables within -->
+<div>
+<input type="search" class="filter-text" value="" placeholder="Filter..." autofocus="autofocus" /><br/>
+
+<!--<table id="datatable" class="datatable" style="display: none" data-lazyscroll="1" cellpadding="0" cellspacing="0" border="0">-->
+<table id="datatable" class="datatable" cellpadding="0" cellspacing="0" border="0">
+<thead>
+<tr>
+ <th data-parse="int">#</th>
+ <th data-parse="int" data-sortable="false" class="sort-disabled">Disabled sort</th>
+ <th data-parse="float"></th>
+ <th data-parse="float">€</th>
+ <th data-filterable="false" data-parse="int">numbers<br/>(disabled filter)</th>
+ <th>Description</th>
+ <th data-parse="int">yyyy-mm-dd</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+ <td>1</td>
+ <td>2</td>
+ <td>4</td>
+ <td data-value="57.49">€ 57,49</td>
+ <td data-value="2">two</td>
+ <td>Test description 1</td>
+ <td data-value="19700101">1970-01-01</td>
+</tr>
+<tr>
+ <td>2</td>
+ <td>3</td>
+ <td>2</td>
+ <td data-value="69.1">€ 69,10</td>
+ <td data-value="1">one</td>
+ <td>Test description 2</td>
+ <td data-value="19690101">1969-01-01</td>
+</tr>
+<tr>
+ <td>3</td>
+ <td>1</td>
+ <td>2</td>
+ <td data-value="69.1">€ 69,10</td>
+ <td data-value="1">One</td>
+ <td>Test description 3</td>
+ <td data-value="19690101">1969-01-01</td>
+</tr>
+<tr>
+ <td>4</td>
+ <td>1</td>
+ <td>2</td>
+ <td data-value="69.1">€ 69,10</td>
+ <td data-value="2">Two</td>
+ <td>Test description 4</td>
+ <td data-value="19690101">1969-01-01</td>
+</tr>
+</tbody>
+<tfoot>
+<tr>
+ <td>This</td>
+ <td>is</td>
+ <td>not</td>
+ <td>sorted</td>
+ <td>or</td>
+ <td>parsed</td>
+ <td>.</td>
+</tr>
+</tfoot>
+</table>
+
+<br/>
+
+<h2>Table 2</h2>
+
+<table class="datatable">
+<thead>
+ <th data-parse="int">Num</th>
+</thead>
+<tbody>
+<tr><td>3</td></tr>
+<tr><td>1</td></tr>
+<tr><td>5</td></tr>
+<tr><td>9</td></tr>
+</tbody>
+</table>
+
+</div>
+
+<br/>
+
+<div>
+
+<h2>Table 3</h2>
+
+<table class="datatable">
+<thead>
+ <th data-parse="int">Num</th>
+</thead>
+<tbody>
+<tr><td>3</td></tr>
+<tr><td>1</td></tr>
+<tr><td>5</td></tr>
+<tr><td>9</td></tr>
+</tbody>
+</table>
+
+</div>
+
+<noscript>
+<style type="text/css">
+#datatable {
+ display: table !important;
+}
+.filter-text {
+ display: none;
+}
+</style>
+</noscript>
+
+<script type="text/javascript" src="datatable.js"></script>
+<script type="text/javascript">var datatables = datatable_autoload();</script>
+
+</body>
+</html>