mirror of
https://github.com/pierre42100/ComunicWeb
synced 2025-07-19 17:35:32 +00:00
assets
adminLTE
bootstrap
dist
plugins
bootstrap-slider
bootstrap-wysihtml5
chartjs
ckeditor
colorpicker
datatables
extensions
AutoFill
ColReorder
ColVis
css
examples
button_order.html
exclude_columns.html
group_columns.html
index.html
jqueryui.html
mouseover.html
new_init.html
restore.html
simple.html
text.html
title_callback.html
two_tables.html
two_tables_identical.html
js
License.txt
Readme.md
FixedColumns
FixedHeader
KeyTable
Responsive
Scroller
TableTools
images
dataTables.bootstrap.css
dataTables.bootstrap.js
dataTables.bootstrap.min.js
jquery.dataTables.css
jquery.dataTables.js
jquery.dataTables.min.css
jquery.dataTables.min.js
jquery.dataTables_themeroller.css
datepicker
daterangepicker
fastclick
flot
font-awesome
fullcalendar
googleFonts
iCheck
input-mask
ionicons
ionslider
jQuery
jQueryUI
jquery-ui
jvectormap
knob
moment.js
morris
pace
raphael
select2
slimScroll
sparkline
timepicker
css
img
js
templates
corePage
.gitignore
.htaccess
LICENSE
README.md
index.php
339 lines
9.7 KiB
HTML
Executable File
339 lines
9.7 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
|
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
|
|
|
<title>ColVis example - Two tables with individual controls</title>
|
|
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
|
<link rel="stylesheet" type="text/css" href="../css/dataTables.colVis.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
|
|
<style type="text/css" class="init">
|
|
|
|
</style>
|
|
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
|
|
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
|
<script type="text/javascript" language="javascript" src="../js/dataTables.colVis.js"></script>
|
|
<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
|
|
<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
|
|
<script type="text/javascript" language="javascript" class="init">
|
|
|
|
|
|
$(document).ready(function() {
|
|
$('table.display').DataTable( {
|
|
dom: 'C<"clear">lfrtip',
|
|
displayLength: 5
|
|
} );
|
|
} );
|
|
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body class="dt-example">
|
|
<div class="container">
|
|
<section>
|
|
<h1>ColVis example <span>Two tables with individual controls</span></h1>
|
|
|
|
<div class="info">
|
|
<p>It can be useful to have DataTables initialise more than one table with a single call can for them to each have individual ColVis controllers. All this requires
|
|
is a suitable jQuery selector to be used, and DataTables and ColVis will take care of the rest - as shown in this example.</p>
|
|
</div>
|
|
|
|
<table id="" class="display" cellspacing="0" width="100%">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Position</th>
|
|
<th>Office</th>
|
|
<th>Age</th>
|
|
<th>Salary</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tfoot>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Position</th>
|
|
<th>Office</th>
|
|
<th>Age</th>
|
|
<th>Salary</th>
|
|
</tr>
|
|
</tfoot>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>Tiger Nixon</td>
|
|
<td>System Architect</td>
|
|
<td>Edinburgh</td>
|
|
<td>61</td>
|
|
<td>$320,800</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cedric Kelly</td>
|
|
<td>Senior Javascript Developer</td>
|
|
<td>Edinburgh</td>
|
|
<td>22</td>
|
|
<td>$433,060</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Sonya Frost</td>
|
|
<td>Software Engineer</td>
|
|
<td>Edinburgh</td>
|
|
<td>23</td>
|
|
<td>$103,600</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Quinn Flynn</td>
|
|
<td>Support Lead</td>
|
|
<td>Edinburgh</td>
|
|
<td>22</td>
|
|
<td>$342,000</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dai Rios</td>
|
|
<td>Personnel Lead</td>
|
|
<td>Edinburgh</td>
|
|
<td>35</td>
|
|
<td>$217,500</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Gavin Joyce</td>
|
|
<td>Developer</td>
|
|
<td>Edinburgh</td>
|
|
<td>42</td>
|
|
<td>$92,575</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Martena Mccray</td>
|
|
<td>Post-Sales support</td>
|
|
<td>Edinburgh</td>
|
|
<td>46</td>
|
|
<td>$324,050</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Jennifer Acosta</td>
|
|
<td>Junior Javascript Developer</td>
|
|
<td>Edinburgh</td>
|
|
<td>43</td>
|
|
<td>$75,650</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Shad Decker</td>
|
|
<td>Regional Director</td>
|
|
<td>Edinburgh</td>
|
|
<td>51</td>
|
|
<td>$183,000</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table id="" class="display" cellspacing="0" width="100%">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Position</th>
|
|
<th>Office</th>
|
|
<th>Age</th>
|
|
<th>Salary</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tfoot>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Position</th>
|
|
<th>Office</th>
|
|
<th>Age</th>
|
|
<th>Salary</th>
|
|
</tr>
|
|
</tfoot>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>Jena Gaines</td>
|
|
<td>Office Manager</td>
|
|
<td>London</td>
|
|
<td>30</td>
|
|
<td>$90,560</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Haley Kennedy</td>
|
|
<td>Senior Marketing Designer</td>
|
|
<td>London</td>
|
|
<td>43</td>
|
|
<td>$313,500</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Tatyana Fitzpatrick</td>
|
|
<td>Regional Director</td>
|
|
<td>London</td>
|
|
<td>19</td>
|
|
<td>$385,750</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Michael Silva</td>
|
|
<td>Marketing Designer</td>
|
|
<td>London</td>
|
|
<td>66</td>
|
|
<td>$198,500</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Bradley Greer</td>
|
|
<td>Software Engineer</td>
|
|
<td>London</td>
|
|
<td>41</td>
|
|
<td>$132,000</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Angelica Ramos</td>
|
|
<td>Chief Executive Officer (CEO)</td>
|
|
<td>London</td>
|
|
<td>47</td>
|
|
<td>$1,200,000</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Suki Burks</td>
|
|
<td>Developer</td>
|
|
<td>London</td>
|
|
<td>53</td>
|
|
<td>$114,500</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Prescott Bartlett</td>
|
|
<td>Technical Author</td>
|
|
<td>London</td>
|
|
<td>27</td>
|
|
<td>$145,000</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Timothy Mooney</td>
|
|
<td>Office Manager</td>
|
|
<td>London</td>
|
|
<td>37</td>
|
|
<td>$136,200</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Bruno Nash</td>
|
|
<td>Software Engineer</td>
|
|
<td>London</td>
|
|
<td>38</td>
|
|
<td>$163,500</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Hermione Butler</td>
|
|
<td>Regional Director</td>
|
|
<td>London</td>
|
|
<td>47</td>
|
|
<td>$356,250</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Lael Greer</td>
|
|
<td>Systems Administrator</td>
|
|
<td>London</td>
|
|
<td>21</td>
|
|
<td>$103,500</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<ul class="tabs">
|
|
<li class="active">Javascript</li>
|
|
<li>HTML</li>
|
|
<li>CSS</li>
|
|
<li>Ajax</li>
|
|
<li>Server-side script</li>
|
|
</ul>
|
|
|
|
<div class="tabs">
|
|
<div class="js">
|
|
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
|
$('table.display').DataTable( {
|
|
dom: 'C<"clear">lfrtip',
|
|
displayLength: 5
|
|
} );
|
|
} );</code>
|
|
|
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
|
|
|
<ul>
|
|
<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
|
<li><a href="../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
|
<li><a href="../js/dataTables.colVis.js">../js/dataTables.colVis.js</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="table">
|
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
|
</div>
|
|
|
|
<div class="css">
|
|
<div>
|
|
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
|
</div>
|
|
|
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
|
|
|
<ul>
|
|
<li><a href="../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
|
|
<li><a href="../css/dataTables.colVis.css">../css/dataTables.colVis.css</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="ajax">
|
|
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
|
loaded.</p>
|
|
</div>
|
|
|
|
<div class="php">
|
|
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
|
documentation</a>.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section>
|
|
<div class="footer">
|
|
<div class="gradient"></div>
|
|
|
|
<div class="liner">
|
|
<h2>Other examples</h2>
|
|
|
|
<div class="toc">
|
|
<div class="toc-group">
|
|
<h3><a href="./index.html">Examples</a></h3>
|
|
<ul class="toc active">
|
|
<li><a href="./simple.html">Basic initialisation</a></li>
|
|
<li><a href="./new_init.html">`new` initialisation</a></li>
|
|
<li><a href="./text.html">Custom button text</a></li>
|
|
<li><a href="./exclude_columns.html">Exclude columns from list</a></li>
|
|
<li><a href="./title_callback.html">Column button callback</a></li>
|
|
<li><a href="./button_order.html">Button ordering</a></li>
|
|
<li><a href="./mouseover.html">Mouseover activation</a></li>
|
|
<li><a href="./group_columns.html">Group columns</a></li>
|
|
<li class="active"><a href="./two_tables.html">Two tables with individual controls</a></li>
|
|
<li><a href="./two_tables_identical.html">Two tables with shared controls</a></li>
|
|
<li><a href="./restore.html">Restore / show all</a></li>
|
|
<li><a href="./jqueryui.html">jQuery UI styling</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="epilogue">
|
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
|
which extend the capabilities of DataTables.</p>
|
|
|
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
|
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
</html> |