Introduction
Introduction Statistics Contact Development Disclaimer Help
datatable: nicer example, test case for filter on multiple tables - jscancer - …
git clone git://git.codemadness.org/jscancer
Log
Files
Refs
README
LICENSE
---
commit 826deb929da361777061f017b18bc4d06369c564
parent 9bbea8b7fea3becef11b06af62d7e4426e5f96fd
Author: Hiltjo Posthuma <[email protected]>
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(-)
---
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..." auto…
+<br/>
<!--<table id="datatable" class="datatable" style="display: none" data-lazyscr…
<table id="datatable" class="datatable" cellpadding="0" cellspacing="0" border…
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..." auto…
+<br/>
-<!--<table id="datatable" class="datatable" style="display: none" data-lazyscr…
<table id="datatable" class="datatable" cellpadding="0" cellspacing="0" border…
<thead>
<tr>
- <th data-parse="int">#</th>
- <th data-parse="int" data-sortable="false" class="sort-disabled">Disab…
- <th data-parse="float"></th>
- <th data-parse="float">&euro;</th>
- <th data-filterable="false" data-parse="int">numbers<br/>(disabled fil…
- <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&nbs…
+<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">&euro; 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">&euro;&nbsp;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">&euro;&nbsp;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">&euro;&nbsp;300.95</td>
+</tr>
+
<tr>
- <td>2</td>
- <td>3</td>
- <td>2</td>
- <td data-value="69.1">&euro; 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">&euro;&nbsp;450.95</td>
</tr>
+
<tr>
- <td>3</td>
- <td>1</td>
- <td>2</td>
- <td data-value="69.1">&euro; 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">&euro;&nbsp;339.95</td>
</tr>
+
<tr>
- <td>4</td>
- <td>1</td>
- <td>2</td>
- <td data-value="69.1">&euro; 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">&euro;&nbsp;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>
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…
+<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..." auto…
+
+<!--<table id="datatable" class="datatable" style="display: none" data-lazyscr…
+<table id="datatable" class="datatable" cellpadding="0" cellspacing="0" border…
+<thead>
+<tr>
+ <th data-parse="int">#</th>
+ <th data-parse="int" data-sortable="false" class="sort-disabled">Disab…
+ <th data-parse="float"></th>
+ <th data-parse="float">&euro;</th>
+ <th data-filterable="false" data-parse="int">numbers<br/>(disabled fil…
+ <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">&euro; 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">&euro; 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">&euro; 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">&euro; 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>
You are viewing proxied material from codemadness.org. The copyright of proxied material belongs to its original authors. Any comments or complaints in relation to proxied material should be directed to the original authors of the content concerned. Please see the disclaimer for more details.