Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-01-11 11:18:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
400bc04405
cssOMS/tests/app/tables.php
Dennis Eichhorn 400bc04405 Use js modules
2019-04-02 22:44:46 +02:00

536 lines
21 KiB
PHP
Raw Blame History

<div class="row">
<div class="col-xs-12 col-md-6">
<div class="box wf-100">
<table class="table green" id="table1">
<caption>Table Title</caption>
<thead>
<tr>
<td><i class="filter fa fa-filter" data-filter=""></i>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td><i class="filter fa fa-filter"></i>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td><i class="filter fa fa-filter"></i>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td><i class="filter fa fa-filter"></i>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
</tr>
</thead>
<tbody>
<tr>
<td>Col2</td>
<td>Col1</td>
<td>Col4</td>
<td>Col3</td>
</tr>
<tr>
<td>Col4</td>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td>Col2</td>
<td>Col1</td>
<td>Col3</td>
<td>Col4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<label>Results: 4</label>
<select>
<option>25</option>
<option>50</option>
<option>100</option>
<option>500</option>
</select>
<ul class="pagination">
<li><a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li>...</li>
<li><a href="#">20</a></li>
</ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="box wf-100">
<table class="table blue" id="table2">
<caption>Table Title</caption>
<thead>
<tr>
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
</tr>
</thead>
<tbody>
<tr>
<td>Col3</td>
<td>Col4</td>
<td>Col2</td>
<td>Col1</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col4</td>
<td>Col3</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td>Col4</td>
<td>Col2</td>
<td>Col1</td>
<td>Col3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<label>Results: 4</label>
<select>
<option>25</option>
<option>50</option>
<option>100</option>
<option>500</option>
</select>
<ul class="pagination">
<li><a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li>...</li>
<li><a href="#">20</a></li>
</ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="box wf-100">
<table id="tRemovable" class="table darkred">
<caption>Table Title</caption>
<thead>
<tr>
<td></td>
<td></td>
<td>Col1 Title</td>
<td>Col2 Title</td>
<td>Col3 Title</td>
<td>Col4 Title</td>
</tr>
</thead>
<tbody>
<tr>
<td><form id="fR1" method="NONE"><i class="fa fa-times btn remove submit"></i></form>
<td><i class="fa fa-cogs btn update submit"></i>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td><form id="fR2" method="NONE"><i class="fa fa-times btn remove submit"></i></form>
<td><i class="fa fa-cogs btn update submit"></i>
<td>Col2</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td><form id="fR3" method="NONE"><i class="fa fa-times btn remove submit"></i></form>
<td><i class="fa fa-cogs btn update submit"></i>
<td>Col3</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td><form id="fR4" method="NONE"><i class="fa fa-times btn remove submit"></i></form>
<td><i class="fa fa-cogs btn update submit"></i>
<td>Col4</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<label>Results: 4</label>
<select>
<option>25</option>
<option>50</option>
<option>100</option>
<option>500</option>
</select>
<ul class="pagination">
<li><a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li>...</li>
<li><a href="#">20</a></li>
</ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="box wf-100">
<table class="table green" id="table3" data-src="http://127.0.0.1/en/api/admin/find/account?search=do">
<caption>Remote Data</caption>
<thead>
<tr>
<td>
<td>
<td data-name=""><i class="filter fa fa-filter"></i>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td data-name=""><i class="filter fa fa-filter"></i>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td data-name=""><i class="filter fa fa-filter"></i>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<tbody>
<template id="input2-rowElement" class="rowTemplate">
<tr tabindex="-1">
<td><form id="fRemove" method="NONE"><i class="fa fa-times btn remove"></i></form>
<td><form id="fUpdate" method="NONE"><i class="fa fa-cogs btn update"></i></form>
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
<td data-tpl-text="/email"></td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="box wf-100">
<table class="table darkgreen" id="table5">
<caption>Table Title</caption>
<thead>
<tr>
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
</tr>
</thead>
<tbody>
<tr>
<td>Col2</td>
<td>Col1</td>
<td>Col4</td>
<td>Col3</td>
</tr>
<tr>
<td>Col4</td>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td>Col2</td>
<td>Col1</td>
<td>Col3</td>
<td>Col4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<label>Results: 4</label>
<select>
<option>25</option>
<option>50</option>
<option>100</option>
<option>500</option>
</select>
<ul class="pagination">
<li><a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li>...</li>
<li><a href="#">20</a></li>
</ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="box wf-100">
<table class="table darkblue" id="table6">
<caption>Table Title</caption>
<thead>
<tr>
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
</tr>
</thead>
<tbody>
<tr>
<td>Col3</td>
<td>Col4</td>
<td>Col2</td>
<td>Col1</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col4</td>
<td>Col3</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td>Col4</td>
<td>Col2</td>
<td>Col1</td>
<td>Col3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<label>Results: 4</label>
<select>
<option>25</option>
<option>50</option>
<option>100</option>
<option>500</option>
</select>
<ul class="pagination">
<li><a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li>...</li>
<li><a href="#">20</a></li>
</ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="box wf-100">
<table class="table orange" id="table7">
<caption>Table Title</caption>
<thead>
<tr>
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
</tr>
</thead>
<tbody>
<tr>
<td>Col2</td>
<td>Col1</td>
<td>Col4</td>
<td>Col3</td>
</tr>
<tr>
<td>Col4</td>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td>Col2</td>
<td>Col1</td>
<td>Col3</td>
<td>Col4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<label>Results: 4</label>
<select>
<option>25</option>
<option>50</option>
<option>100</option>
<option>500</option>
</select>
<ul class="pagination">
<li><a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li>...</li>
<li><a href="#">20</a></li>
</ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="box wf-100">
<table class="table yellow" id="table8">
<caption>Table Title</caption>
<thead>
<tr>
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
</tr>
</thead>
<tbody>
<tr>
<td>Col3</td>
<td>Col4</td>
<td>Col2</td>
<td>Col1</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col4</td>
<td>Col3</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td>Col4</td>
<td>Col2</td>
<td>Col1</td>
<td>Col3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<label>Results: 4</label>
<select>
<option>25</option>
<option>50</option>
<option>100</option>
<option>500</option>
</select>
<ul class="pagination">
<li><a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li>...</li>
<li><a href="#">20</a></li>
</ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<template id="table-filter-tpl">
<section id="table-filter" class="box">
<div class="inner">
<form>
<table class="layout wf-100">
<tr><td colspan="2"><label>Column Name</label>
<tr><td>
<select>
<option>=
<option>in
<option>>
<option>>=
<option><
<option><=
<option>*
</select>
<td><input type="text">
<tr><td colspan="2"><select>
<option>OR
<option>AND
</select>
<tr><td>
<select>
<option>=
<option>in
<option>>
<option>>=
<option><
<option><=
<option>*
</select>
<td><input type="text">
<tr><td colspan="2"><button type="submit">Filter</button><button type="reset">Cancel</button>
</table>
</form>
</div>
</section>
</template>
<script type="module">
import { Request } from '../../../jsOMS/Message/Request/Request.js';
import { Table } from '../../../jsOMS/UI/Component/Table.js';
const loginRequest = new Request('http://127.0.0.1/en/api/login', 'POST', 'json');
loginRequest.setData({user: 'admin', pass: 'orange'});
loginRequest.send();
Table.getRemoteData(document.getElementById('table3'));
</script>
Reference in New Issue View Git Blame Copy Permalink