mirror of
https://github.com/DataTables/DataTables.git
synced 2024-11-28 10:24:10 +01:00
Sync with latest DataTablesSrc
This commit is contained in:
Allan Jardine
parent
f91373337b
commit
3977c5de72
327
examples/api/tabs_and_scrolling.html
Normal file
327
examples/api/tabs_and_scrolling.html
Normal file
@ -0,0 +1,327 @@
|
||||
<!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>DataTables example - Scrolling and Bootstrap tabs</title>
|
||||
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/dataTables.bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/dataTables.bootstrap.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
|
||||
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
|
||||
} );
|
||||
|
||||
$('table.table').DataTable( {
|
||||
ajax: '../ajax/data/arrays.txt',
|
||||
scrollY: 200,
|
||||
scrollCollapse: true,
|
||||
paging: false
|
||||
} );
|
||||
|
||||
// Apply a search to the second table for the demo
|
||||
$('#myTable2').DataTable().search( 'New York' ).draw();
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example dt-example-bootstrap">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Scrolling and Bootstrap tabs</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>This example shows how DataTables with scrolling can be used together with <a href="http://getbootstrap.com/javascript/#tabs">Bootstrap tabs</a> (or indeed any
|
||||
other method whereby the table is in a hidden, <code>display:none</code>, element when it is initialised).</p>
|
||||
|
||||
<p>The reason this requires special consideration is that when the DataTable is initialised in a hidden element the browser doesn't have any measurements with
|
||||
which to give the DataTable, and this will result in the misalignment of columns when scrolling is enabled.</p>
|
||||
|
||||
<p>This misalignment can be corrected by the <a href="//datatables.net/reference/api/columns.adjust()"><code class="api" title=
|
||||
"DataTables API method">columns.adjust()</code></a> method when the table is made visible (i.e. it has dimensions).</p>
|
||||
|
||||
<p>This example shows how the Bootstrap <code>shown.bs.tab</code> event can be used to trigger this method call. The visible tables on the page are selected using
|
||||
the static <a href="//datatables.net/reference/api/%24.fn.dataTable.tables()"><code class="api" title="DataTables API method">$.fn.dataTable.tables()</code></a>
|
||||
method and running the <a href="//datatables.net/reference/api/columns.adjust()"><code class="api" title="DataTables API method">columns.adjust()</code></a> method
|
||||
on them.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="active"><a href="#tab-table1" data-toggle="tab">Table 1</a></li>
|
||||
<li><a href="#tab-table2" data-toggle="tab">Table 2</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="tab-table1">
|
||||
<table id="myTable1" class="table table-striped table-bordered" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="tab-table2">
|
||||
<table id="myTable2" class="table table-striped table-bordered" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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() {
|
||||
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
|
||||
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
|
||||
} );
|
||||
|
||||
$('table.table').DataTable( {
|
||||
ajax: '../ajax/data/arrays.txt',
|
||||
scrollY: 200,
|
||||
scrollCollapse: true,
|
||||
paging: false
|
||||
} );
|
||||
|
||||
// Apply a search to the second table for the demo
|
||||
$('#myTable2').DataTable().search( 'New York' ).draw();
|
||||
} );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
|
||||
<li><a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js</a></li>
|
||||
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../../media/js/dataTables.bootstrap.js">../../media/js/dataTables.bootstrap.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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css</a></li>
|
||||
<li><a href="../../media/css/dataTables.bootstrap.css">../../media/css/dataTables.bootstrap.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="../basic_init/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
|
||||
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
|
||||
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
|
||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
|
||||
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
|
||||
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
|
||||
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
|
||||
<li><a href="../basic_init/state_save.html">State saving</a></li>
|
||||
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
|
||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
|
||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
|
||||
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
|
||||
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="toc-group">
|
||||
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
|
||||
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
|
||||
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
|
||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
|
||||
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
|
||||
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li><a href="../styling/display.html">Base style</a></li>
|
||||
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
|
||||
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
|
||||
<li><a href="../styling/compact.html">Base style - compact</a></li>
|
||||
<li><a href="../styling/hover.html">Base style - hover</a></li>
|
||||
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
|
||||
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
|
||||
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
|
||||
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
|
||||
<li><a href="../styling/foundation.html">Foundation</a></li>
|
||||
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="toc-group">
|
||||
<h3><a href="../data_sources/index.html">Data sources</a></h3>
|
||||
<ul class="toc">
|
||||
<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
|
||||
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
|
||||
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
|
||||
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">API</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./add_row.html">Add rows</a></li>
|
||||
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
||||
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
||||
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
||||
<li><a href="./select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||
<li><a href="./form.html">Form inputs</a></li>
|
||||
<li><a href="./counter_columns.html">Index column</a></li>
|
||||
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
|
||||
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
|
||||
<li class="active"><a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
|
||||
<li><a href="./regex.html">Search API (regular expressions)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="toc-group">
|
||||
<h3><a href="../ajax/index.html">Ajax</a></h3>
|
||||
<ul class="toc">
|
||||
<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
|
||||
<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
|
||||
<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
|
||||
<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
|
||||
<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
|
||||
<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
|
||||
<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
|
||||
<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
|
||||
<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="toc-group">
|
||||
<h3><a href="../server_side/index.html">Server-side</a></h3>
|
||||
<ul class="toc">
|
||||
<li><a href="../server_side/simple.html">Server-side processing</a></li>
|
||||
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
|
||||
<li><a href="../server_side/post.html">POST data</a></li>
|
||||
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
|
||||
<li><a href="../server_side/object_data.html">Object data source</a></li>
|
||||
<li><a href="../server_side/row_details.html">Row details</a></li>
|
||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="toc-group">
|
||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||
<ul class="toc">
|
||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
||||
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
|
||||
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
|
||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</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/extensions">extensions</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>
|
||||
741
examples/basic_init/scroll_y_dynamic.html
Normal file
741
examples/basic_init/scroll_y_dynamic.html
Normal file
@ -0,0 +1,741 @@
|
||||
<!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>DataTables example - Scroll - vertical, dynamic height</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
scrollY: '50vh',
|
||||
scrollCollapse: true,
|
||||
paging: false
|
||||
} );
|
||||
} );
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Scroll - vertical, dynamic height</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>This example shows a vertically scrolling DataTable that makes use of the CSS3 <code>vh</code> unit in order to dynamically resize the viewport based on the
|
||||
browser window height. The <a href="https://developer.mozilla.org/en/docs/Web/CSS/length#Viewport-percentage_lengths"><code>vh</code> unit</a> is effectively a
|
||||
percentage of the browser window height. So the <code>50vh</code> used in this example is 50% of the window height. The viewport size will update dynamically as
|
||||
the window is resized.</p>
|
||||
|
||||
<p>A relatively modern browser is <a href="http://caniuse.com/#feat=viewport-units">required for <code>vh</code> units</a> to operate correctly. IE9+ supports the
|
||||
<code>vh</code> unit and all other evergreen browsers.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</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() {
|
||||
$('#example').DataTable( {
|
||||
scrollY: '50vh',
|
||||
scrollCollapse: true,
|
||||
paging: false
|
||||
} );
|
||||
} );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
|
||||
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.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>
|
||||
</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">Basic initialisation</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./zero_configuration.html">Zero configuration</a></li>
|
||||
<li><a href="./filter_only.html">Feature enable / disable</a></li>
|
||||
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
|
||||
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./hidden_columns.html">Hidden columns</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||
<li><a href="./dom.html">DOM positioning</a></li>
|
||||
<li><a href="./flexible_width.html">Flexible table width</a></li>
|
||||
<li><a href="./state_save.html">State saving</a></li>
|
||||
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
|
||||
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
|
||||
<li class="active"><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
|
||||
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
|
||||
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
|
||||
<li><a href="./language.html">Language options</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="toc-group">
|
||||
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
|
||||
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
|
||||
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
|
||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
|
||||
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
|
||||
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li><a href="../styling/display.html">Base style</a></li>
|
||||
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
|
||||
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
|
||||
<li><a href="../styling/compact.html">Base style - compact</a></li>
|
||||
<li><a href="../styling/hover.html">Base style - hover</a></li>
|
||||
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
|
||||
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
|
||||
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
|
||||
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
|
||||
<li><a href="../styling/foundation.html">Foundation</a></li>
|
||||
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="toc-group">
|
||||
<h3><a href="../data_sources/index.html">Data sources</a></h3>
|
||||
<ul class="toc">
|
||||
<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
|
||||
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
|
||||
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
|
||||
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="toc-group">
|
||||
<h3><a href="../api/index.html">API</a></h3>
|
||||
<ul class="toc">
|
||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
||||
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
|
||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
|
||||
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
|
||||
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||
<li><a href="../api/form.html">Form inputs</a></li>
|
||||
<li><a href="../api/counter_columns.html">Index column</a></li>
|
||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
|
||||
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
|
||||
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="toc-group">
|
||||
<h3><a href="../ajax/index.html">Ajax</a></h3>
|
||||
<ul class="toc">
|
||||
<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
|
||||
<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
|
||||
<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
|
||||
<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
|
||||
<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
|
||||
<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
|
||||
<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
|
||||
<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
|
||||
<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="toc-group">
|
||||
<h3><a href="../server_side/index.html">Server-side</a></h3>
|
||||
<ul class="toc">
|
||||
<li><a href="../server_side/simple.html">Server-side processing</a></li>
|
||||
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
|
||||
<li><a href="../server_side/post.html">POST data</a></li>
|
||||
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
|
||||
<li><a href="../server_side/object_data.html">Object data source</a></li>
|
||||
<li><a href="../server_side/row_details.html">Row details</a></li>
|
||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="toc-group">
|
||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||
<ul class="toc">
|
||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
||||
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
|
||||
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
|
||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</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/extensions">extensions</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>
|
||||
161
media/css/dataTables.bootstrap.css
Normal file
161
media/css/dataTables.bootstrap.css
Normal file
@ -0,0 +1,161 @@
|
||||
table.dataTable {
|
||||
clear: both;
|
||||
margin-top: 6px !important;
|
||||
margin-bottom: 6px !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
table.dataTable td,
|
||||
table.dataTable th {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
table.dataTable.nowrap th,
|
||||
table.dataTable.nowrap td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_length label {
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_length select {
|
||||
width: 75px;
|
||||
display: inline-block;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_filter {
|
||||
text-align: right;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_filter label {
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_filter input {
|
||||
margin-left: 0.5em;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_info {
|
||||
padding-top: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_paginate {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
|
||||
margin: 2px 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataTable thead > tr > th,
|
||||
table.dataTable thead > tr > td {
|
||||
padding-right: 30px;
|
||||
}
|
||||
table.dataTable thead > tr > th:active,
|
||||
table.dataTable thead > tr > td:active {
|
||||
outline: none;
|
||||
}
|
||||
table.dataTable thead .sorting,
|
||||
table.dataTable thead .sorting_asc,
|
||||
table.dataTable thead .sorting_desc,
|
||||
table.dataTable thead .sorting_asc_disabled,
|
||||
table.dataTable thead .sorting_desc_disabled {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
table.dataTable thead .sorting:after,
|
||||
table.dataTable thead .sorting_asc:after,
|
||||
table.dataTable thead .sorting_desc:after,
|
||||
table.dataTable thead .sorting_asc_disabled:after,
|
||||
table.dataTable thead .sorting_desc_disabled:after {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
display: block;
|
||||
font-family: 'Glyphicons Halflings';
|
||||
opacity: 0.5;
|
||||
}
|
||||
table.dataTable thead .sorting:after {
|
||||
opacity: 0.2;
|
||||
content: "\e150";
|
||||
/* sort */
|
||||
}
|
||||
table.dataTable thead .sorting_asc:after {
|
||||
content: "\e155";
|
||||
/* sort-by-attributes */
|
||||
}
|
||||
table.dataTable thead .sorting_desc:after {
|
||||
content: "\e156";
|
||||
/* sort-by-attributes-alt */
|
||||
}
|
||||
table.dataTable thead .sorting_asc_disabled:after,
|
||||
table.dataTable thead .sorting_desc_disabled:after {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
div.dataTables_scrollHead table.dataTable {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
div.dataTables_scrollBody table {
|
||||
border-top: none;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
div.dataTables_scrollBody table thead .sorting:after,
|
||||
div.dataTables_scrollBody table thead .sorting_asc:after,
|
||||
div.dataTables_scrollBody table thead .sorting_desc:after {
|
||||
display: none;
|
||||
}
|
||||
div.dataTables_scrollBody table tbody tr:first-child th,
|
||||
div.dataTables_scrollBody table tbody tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
div.dataTables_scrollFoot table {
|
||||
margin-top: 0 !important;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
div.dataTables_wrapper div.dataTables_length,
|
||||
div.dataTables_wrapper div.dataTables_filter,
|
||||
div.dataTables_wrapper div.dataTables_info,
|
||||
div.dataTables_wrapper div.dataTables_paginate {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
table.dataTable.table-condensed > thead > tr > th {
|
||||
padding-right: 20px;
|
||||
}
|
||||
table.dataTable.table-condensed .sorting:after,
|
||||
table.dataTable.table-condensed .sorting_asc:after,
|
||||
table.dataTable.table-condensed .sorting_desc:after {
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
table.table-bordered.dataTable {
|
||||
border-collapse: separate !important;
|
||||
}
|
||||
table.table-bordered.dataTable th,
|
||||
table.table-bordered.dataTable td {
|
||||
border-left-width: 0;
|
||||
}
|
||||
table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child,
|
||||
table.table-bordered.dataTable td:last-child,
|
||||
table.table-bordered.dataTable td:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
table.table-bordered.dataTable tbody th,
|
||||
table.table-bordered.dataTable tbody td {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
div.dataTables_scrollHead table.table-bordered {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
1
media/css/dataTables.bootstrap.min.css
vendored
Normal file
1
media/css/dataTables.bootstrap.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:75px;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:8px;white-space:nowrap}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap}table.dataTable thead>tr>th,table.dataTable thead>tr>td{padding-right:30px}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer;position:relative}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{position:absolute;bottom:8px;right:8px;display:block;font-family:'Glyphicons Halflings';opacity:0.5}table.dataTable thead .sorting:after{opacity:0.2;content:"\e150"}table.dataTable thead .sorting_asc:after{content:"\e155"}table.dataTable thead .sorting_desc:after{content:"\e156"}table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{color:#eee}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table thead .sorting:after,div.dataTables_scrollBody table thead .sorting_asc:after,div.dataTables_scrollBody table thead .sorting_desc:after{display:none}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}}table.dataTable.table-condensed>thead>tr>th{padding-right:20px}table.dataTable.table-condensed .sorting:after,table.dataTable.table-condensed .sorting_asc:after,table.dataTable.table-condensed .sorting_desc:after{top:6px;right:6px}table.table-bordered.dataTable{border-collapse:separate !important}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:0}table.table-bordered.dataTable tbody th,table.table-bordered.dataTable tbody td{border-bottom-width:0}div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}
|
||||
98
media/css/dataTables.foundation.css
Normal file
98
media/css/dataTables.foundation.css
Normal file
@ -0,0 +1,98 @@
|
||||
table.dataTable {
|
||||
clear: both;
|
||||
margin: 0.5em 0 !important;
|
||||
max-width: none !important;
|
||||
width: 100%;
|
||||
}
|
||||
table.dataTable td,
|
||||
table.dataTable th {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
table.dataTable.nowrap th, table.dataTable.nowrap td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_length label {
|
||||
float: left;
|
||||
text-align: left;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_length select {
|
||||
width: 75px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_filter label {
|
||||
float: right;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_filter input {
|
||||
display: inline-block !important;
|
||||
width: auto !important;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_info {
|
||||
padding-top: 2px;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_paginate {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
table.dataTable thead th,
|
||||
table.dataTable thead td {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
table.dataTable thead th:active,
|
||||
table.dataTable thead td:active {
|
||||
outline: none;
|
||||
}
|
||||
table.dataTable thead .sorting,
|
||||
table.dataTable thead .sorting_asc,
|
||||
table.dataTable thead .sorting_desc {
|
||||
cursor: pointer;
|
||||
}
|
||||
table.dataTable thead .sorting,
|
||||
table.dataTable thead .sorting_asc,
|
||||
table.dataTable thead .sorting_desc,
|
||||
table.dataTable thead .sorting_asc_disabled,
|
||||
table.dataTable thead .sorting_desc_disabled {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right;
|
||||
}
|
||||
table.dataTable thead .sorting {
|
||||
background-image: url("../images/sort_both.png");
|
||||
}
|
||||
table.dataTable thead .sorting_asc {
|
||||
background-image: url("../images/sort_asc.png");
|
||||
}
|
||||
table.dataTable thead .sorting_desc {
|
||||
background-image: url("../images/sort_desc.png");
|
||||
}
|
||||
table.dataTable thead .sorting_asc_disabled {
|
||||
background-image: url("../images/sort_asc_disabled.png");
|
||||
}
|
||||
table.dataTable thead .sorting_desc_disabled {
|
||||
background-image: url("../images/sort_desc_disabled.png");
|
||||
}
|
||||
|
||||
div.dataTables_scrollHead table {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
div.dataTables_scrollBody table {
|
||||
border-top: none;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
div.dataTables_scrollBody table tbody tr:first-child th,
|
||||
div.dataTables_scrollBody table tbody tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
div.dataTables_scrollFoot table {
|
||||
margin-top: 0 !important;
|
||||
border-top: none;
|
||||
}
|
||||
1
media/css/dataTables.foundation.min.css
vendored
Normal file
1
media/css/dataTables.foundation.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
table.dataTable{clear:both;margin:0.5em 0 !important;max-width:none !important;width:100%}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{float:left;text-align:left;margin-bottom:0}div.dataTables_wrapper div.dataTables_length select{width:75px;margin-bottom:0}div.dataTables_wrapper div.dataTables_filter label{float:right;margin-bottom:0}div.dataTables_wrapper div.dataTables_filter input{display:inline-block !important;width:auto !important;margin-bottom:0;margin-left:0.5em}div.dataTables_wrapper div.dataTables_info{padding-top:2px}div.dataTables_wrapper div.dataTables_paginate{float:right;margin:0}table.dataTable thead th,table.dataTable thead td{padding-right:1.5rem}table.dataTable thead th:active,table.dataTable thead td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc{cursor:pointer}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{background-repeat:no-repeat;background-position:center right}table.dataTable thead .sorting{background-image:url("../images/sort_both.png")}table.dataTable thead .sorting_asc{background-image:url("../images/sort_asc.png")}table.dataTable thead .sorting_desc{background-image:url("../images/sort_desc.png")}table.dataTable thead .sorting_asc_disabled{background-image:url("../images/sort_asc_disabled.png")}table.dataTable thead .sorting_desc_disabled{background-image:url("../images/sort_desc_disabled.png")}div.dataTables_scrollHead table{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot table{margin-top:0 !important;border-top:none}
|
||||
473
media/css/dataTables.jqueryui.css
Normal file
473
media/css/dataTables.jqueryui.css
Normal file
@ -0,0 +1,473 @@
|
||||
/*
|
||||
* Table styles
|
||||
*/
|
||||
table.dataTable {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
clear: both;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
/*
|
||||
* Header and footer styles
|
||||
*/
|
||||
/*
|
||||
* Body styles
|
||||
*/
|
||||
}
|
||||
table.dataTable thead th,
|
||||
table.dataTable tfoot th {
|
||||
font-weight: bold;
|
||||
}
|
||||
table.dataTable thead th,
|
||||
table.dataTable thead td {
|
||||
padding: 10px 18px;
|
||||
}
|
||||
table.dataTable thead th:active,
|
||||
table.dataTable thead td:active {
|
||||
outline: none;
|
||||
}
|
||||
table.dataTable tfoot th,
|
||||
table.dataTable tfoot td {
|
||||
padding: 10px 18px 6px 18px;
|
||||
}
|
||||
table.dataTable tbody tr {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
table.dataTable tbody tr.selected {
|
||||
background-color: #B0BED9;
|
||||
}
|
||||
table.dataTable tbody th,
|
||||
table.dataTable tbody td {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
table.dataTable.row-border tbody tr:first-child th,
|
||||
table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th,
|
||||
table.dataTable.display tbody tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td {
|
||||
border-top: 1px solid #ddd;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
table.dataTable.cell-border tbody tr th:first-child,
|
||||
table.dataTable.cell-border tbody tr td:first-child {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
table.dataTable.cell-border tbody tr:first-child th,
|
||||
table.dataTable.cell-border tbody tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected {
|
||||
background-color: #acbad4;
|
||||
}
|
||||
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
table.dataTable.hover tbody tr:hover.selected, table.dataTable.display tbody tr:hover.selected {
|
||||
background-color: #aab7d1;
|
||||
}
|
||||
table.dataTable.order-column tbody tr > .sorting_1,
|
||||
table.dataTable.order-column tbody tr > .sorting_2,
|
||||
table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
|
||||
table.dataTable.display tbody tr > .sorting_2,
|
||||
table.dataTable.display tbody tr > .sorting_3 {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
table.dataTable.order-column tbody tr.selected > .sorting_1,
|
||||
table.dataTable.order-column tbody tr.selected > .sorting_2,
|
||||
table.dataTable.order-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1,
|
||||
table.dataTable.display tbody tr.selected > .sorting_2,
|
||||
table.dataTable.display tbody tr.selected > .sorting_3 {
|
||||
background-color: #acbad5;
|
||||
}
|
||||
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
|
||||
background-color: #a6b4cd;
|
||||
}
|
||||
table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
|
||||
background-color: #a8b5cf;
|
||||
}
|
||||
table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
|
||||
background-color: #a9b7d1;
|
||||
}
|
||||
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
|
||||
background-color: #fcfcfc;
|
||||
}
|
||||
table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
|
||||
background-color: #fefefe;
|
||||
}
|
||||
table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
|
||||
background-color: #acbad5;
|
||||
}
|
||||
table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
|
||||
background-color: #aebcd6;
|
||||
}
|
||||
table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
|
||||
background-color: #afbdd8;
|
||||
}
|
||||
table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
|
||||
background-color: #ececec;
|
||||
}
|
||||
table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
|
||||
background-color: #efefef;
|
||||
}
|
||||
table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
|
||||
background-color: #a2aec7;
|
||||
}
|
||||
table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
|
||||
background-color: #a3b0c9;
|
||||
}
|
||||
table.dataTable.display tbody tr:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
|
||||
background-color: #a5b2cb;
|
||||
}
|
||||
table.dataTable.no-footer {
|
||||
border-bottom: 1px solid #111;
|
||||
}
|
||||
table.dataTable.nowrap th, table.dataTable.nowrap td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
table.dataTable.compact thead th,
|
||||
table.dataTable.compact thead td {
|
||||
padding: 4px 17px 4px 4px;
|
||||
}
|
||||
table.dataTable.compact tfoot th,
|
||||
table.dataTable.compact tfoot td {
|
||||
padding: 4px;
|
||||
}
|
||||
table.dataTable.compact tbody th,
|
||||
table.dataTable.compact tbody td {
|
||||
padding: 4px;
|
||||
}
|
||||
table.dataTable th.dt-left,
|
||||
table.dataTable td.dt-left {
|
||||
text-align: left;
|
||||
}
|
||||
table.dataTable th.dt-center,
|
||||
table.dataTable td.dt-center,
|
||||
table.dataTable td.dataTables_empty {
|
||||
text-align: center;
|
||||
}
|
||||
table.dataTable th.dt-right,
|
||||
table.dataTable td.dt-right {
|
||||
text-align: right;
|
||||
}
|
||||
table.dataTable th.dt-justify,
|
||||
table.dataTable td.dt-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
table.dataTable th.dt-nowrap,
|
||||
table.dataTable td.dt-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
table.dataTable thead th.dt-head-left,
|
||||
table.dataTable thead td.dt-head-left,
|
||||
table.dataTable tfoot th.dt-head-left,
|
||||
table.dataTable tfoot td.dt-head-left {
|
||||
text-align: left;
|
||||
}
|
||||
table.dataTable thead th.dt-head-center,
|
||||
table.dataTable thead td.dt-head-center,
|
||||
table.dataTable tfoot th.dt-head-center,
|
||||
table.dataTable tfoot td.dt-head-center {
|
||||
text-align: center;
|
||||
}
|
||||
table.dataTable thead th.dt-head-right,
|
||||
table.dataTable thead td.dt-head-right,
|
||||
table.dataTable tfoot th.dt-head-right,
|
||||
table.dataTable tfoot td.dt-head-right {
|
||||
text-align: right;
|
||||
}
|
||||
table.dataTable thead th.dt-head-justify,
|
||||
table.dataTable thead td.dt-head-justify,
|
||||
table.dataTable tfoot th.dt-head-justify,
|
||||
table.dataTable tfoot td.dt-head-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
table.dataTable thead th.dt-head-nowrap,
|
||||
table.dataTable thead td.dt-head-nowrap,
|
||||
table.dataTable tfoot th.dt-head-nowrap,
|
||||
table.dataTable tfoot td.dt-head-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
table.dataTable tbody th.dt-body-left,
|
||||
table.dataTable tbody td.dt-body-left {
|
||||
text-align: left;
|
||||
}
|
||||
table.dataTable tbody th.dt-body-center,
|
||||
table.dataTable tbody td.dt-body-center {
|
||||
text-align: center;
|
||||
}
|
||||
table.dataTable tbody th.dt-body-right,
|
||||
table.dataTable tbody td.dt-body-right {
|
||||
text-align: right;
|
||||
}
|
||||
table.dataTable tbody th.dt-body-justify,
|
||||
table.dataTable tbody td.dt-body-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
table.dataTable tbody th.dt-body-nowrap,
|
||||
table.dataTable tbody td.dt-body-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataTable,
|
||||
table.dataTable th,
|
||||
table.dataTable td {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* Control feature layout
|
||||
*/
|
||||
.dataTables_wrapper {
|
||||
position: relative;
|
||||
clear: both;
|
||||
*zoom: 1;
|
||||
zoom: 1;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_length {
|
||||
float: left;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_filter {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_filter input {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_info {
|
||||
clear: both;
|
||||
float: left;
|
||||
padding-top: 0.755em;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate {
|
||||
float: right;
|
||||
text-align: right;
|
||||
padding-top: 0.25em;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
min-width: 1.5em;
|
||||
padding: 0.5em 1em;
|
||||
margin-left: 2px;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
color: #333 !important;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
|
||||
color: #333 !important;
|
||||
border: 1px solid #979797;
|
||||
background-color: white;
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #dcdcdc));
|
||||
/* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, white 0%, #dcdcdc 100%);
|
||||
/* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient(top, white 0%, #dcdcdc 100%);
|
||||
/* FF3.6+ */
|
||||
background: -ms-linear-gradient(top, white 0%, #dcdcdc 100%);
|
||||
/* IE10+ */
|
||||
background: -o-linear-gradient(top, white 0%, #dcdcdc 100%);
|
||||
/* Opera 11.10+ */
|
||||
background: linear-gradient(to bottom, white 0%, #dcdcdc 100%);
|
||||
/* W3C */
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
|
||||
cursor: default;
|
||||
color: #666 !important;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
|
||||
color: white !important;
|
||||
border: 1px solid #111;
|
||||
background-color: #585858;
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));
|
||||
/* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
|
||||
/* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient(top, #585858 0%, #111 100%);
|
||||
/* FF3.6+ */
|
||||
background: -ms-linear-gradient(top, #585858 0%, #111 100%);
|
||||
/* IE10+ */
|
||||
background: -o-linear-gradient(top, #585858 0%, #111 100%);
|
||||
/* Opera 11.10+ */
|
||||
background: linear-gradient(to bottom, #585858 0%, #111 100%);
|
||||
/* W3C */
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
|
||||
outline: none;
|
||||
background-color: #2b2b2b;
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));
|
||||
/* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
|
||||
/* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
|
||||
/* FF3.6+ */
|
||||
background: -ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
|
||||
/* IE10+ */
|
||||
background: -o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
|
||||
/* Opera 11.10+ */
|
||||
background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
|
||||
/* W3C */
|
||||
box-shadow: inset 0 0 3px #111;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate .ellipsis {
|
||||
padding: 0 1em;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_processing {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-left: -50%;
|
||||
margin-top: -25px;
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
background-color: white;
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
|
||||
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
.dataTables_wrapper .dataTables_length,
|
||||
.dataTables_wrapper .dataTables_filter,
|
||||
.dataTables_wrapper .dataTables_info,
|
||||
.dataTables_wrapper .dataTables_processing,
|
||||
.dataTables_wrapper .dataTables_paginate {
|
||||
color: #333;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_scroll {
|
||||
clear: both;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
|
||||
*margin-top: -1px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th > div.dataTables_sizing,
|
||||
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td > div.dataTables_sizing {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.dataTables_wrapper.no-footer .dataTables_scrollBody {
|
||||
border-bottom: 1px solid #111;
|
||||
}
|
||||
.dataTables_wrapper.no-footer div.dataTables_scrollHead table,
|
||||
.dataTables_wrapper.no-footer div.dataTables_scrollBody table {
|
||||
border-bottom: none;
|
||||
}
|
||||
.dataTables_wrapper:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.dataTables_wrapper .dataTables_info,
|
||||
.dataTables_wrapper .dataTables_paginate {
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
.dataTables_wrapper .dataTables_length,
|
||||
.dataTables_wrapper .dataTables_filter {
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_filter {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
table.dataTable thead th div.DataTables_sort_wrapper {
|
||||
position: relative;
|
||||
}
|
||||
table.dataTable thead th div.DataTables_sort_wrapper span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
right: -18px;
|
||||
}
|
||||
table.dataTable thead th.ui-state-default,
|
||||
table.dataTable tfoot th.ui-state-default {
|
||||
border-right-width: 0;
|
||||
}
|
||||
table.dataTable thead th.ui-state-default:last-child,
|
||||
table.dataTable tfoot th.ui-state-default:last-child {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Control feature layout
|
||||
*/
|
||||
.dataTables_wrapper .dataTables_paginate .fg-button {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
min-width: 1.5em;
|
||||
padding: 0.5em;
|
||||
margin-left: 2px;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
color: #333 !important;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate .fg-button:active {
|
||||
outline: none;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate .fg-button:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate .fg-button:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
.dataTables_wrapper .ui-widget-header {
|
||||
font-weight: normal;
|
||||
}
|
||||
.dataTables_wrapper .ui-toolbar {
|
||||
padding: 8px;
|
||||
}
|
||||
.dataTables_wrapper.no-footer .dataTables_scrollBody {
|
||||
border-bottom: none;
|
||||
}
|
||||
1
media/css/dataTables.jqueryui.min.css
vendored
Normal file
1
media/css/dataTables.jqueryui.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
206
media/js/dataTables.bootstrap.js
Normal file
206
media/js/dataTables.bootstrap.js
Normal file
@ -0,0 +1,206 @@
|
||||
/*! DataTables Bootstrap 3 integration
|
||||
* ©2011-2014 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
/**
|
||||
* DataTables integration for Bootstrap 3. This requires Bootstrap 3 and
|
||||
* DataTables 1.10 or newer.
|
||||
*
|
||||
* This file sets the defaults and adds options to DataTables to style its
|
||||
* controls using Bootstrap. See http://datatables.net/manual/styling/bootstrap
|
||||
* for further information.
|
||||
*/
|
||||
(function(window, document, undefined){
|
||||
|
||||
var factory = function( $, DataTable ) {
|
||||
"use strict";
|
||||
|
||||
|
||||
/* Set the defaults for DataTables initialisation */
|
||||
$.extend( true, DataTable.defaults, {
|
||||
dom:
|
||||
"<'row'<'col-sm-6'l><'col-sm-6'f>>" +
|
||||
"<'row'<'col-sm-12'tr>>" +
|
||||
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
|
||||
renderer: 'bootstrap'
|
||||
} );
|
||||
|
||||
|
||||
/* Default class modification */
|
||||
$.extend( DataTable.ext.classes, {
|
||||
sWrapper: "dataTables_wrapper form-inline dt-bootstrap",
|
||||
sFilterInput: "form-control input-sm",
|
||||
sLengthSelect: "form-control input-sm"
|
||||
} );
|
||||
|
||||
|
||||
/* Bootstrap paging button renderer */
|
||||
DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) {
|
||||
var api = new DataTable.Api( settings );
|
||||
var classes = settings.oClasses;
|
||||
var lang = settings.oLanguage.oPaginate;
|
||||
var btnDisplay, btnClass, counter=0;
|
||||
|
||||
var attach = function( container, buttons ) {
|
||||
var i, ien, node, button;
|
||||
var clickHandler = function ( e ) {
|
||||
e.preventDefault();
|
||||
if ( !$(e.currentTarget).hasClass('disabled') ) {
|
||||
api.page( e.data.action ).draw( 'page' );
|
||||
}
|
||||
};
|
||||
|
||||
for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
|
||||
button = buttons[i];
|
||||
|
||||
if ( $.isArray( button ) ) {
|
||||
attach( container, button );
|
||||
}
|
||||
else {
|
||||
btnDisplay = '';
|
||||
btnClass = '';
|
||||
|
||||
switch ( button ) {
|
||||
case 'ellipsis':
|
||||
btnDisplay = '…';
|
||||
btnClass = 'disabled';
|
||||
break;
|
||||
|
||||
case 'first':
|
||||
btnDisplay = lang.sFirst;
|
||||
btnClass = button + (page > 0 ?
|
||||
'' : ' disabled');
|
||||
break;
|
||||
|
||||
case 'previous':
|
||||
btnDisplay = lang.sPrevious;
|
||||
btnClass = button + (page > 0 ?
|
||||
'' : ' disabled');
|
||||
break;
|
||||
|
||||
case 'next':
|
||||
btnDisplay = lang.sNext;
|
||||
btnClass = button + (page < pages-1 ?
|
||||
'' : ' disabled');
|
||||
break;
|
||||
|
||||
case 'last':
|
||||
btnDisplay = lang.sLast;
|
||||
btnClass = button + (page < pages-1 ?
|
||||
'' : ' disabled');
|
||||
break;
|
||||
|
||||
default:
|
||||
btnDisplay = button + 1;
|
||||
btnClass = page === button ?
|
||||
'active' : '';
|
||||
break;
|
||||
}
|
||||
|
||||
if ( btnDisplay ) {
|
||||
node = $('<li>', {
|
||||
'class': classes.sPageButton+' '+btnClass,
|
||||
'id': idx === 0 && typeof button === 'string' ?
|
||||
settings.sTableId +'_'+ button :
|
||||
null
|
||||
} )
|
||||
.append( $('<a>', {
|
||||
'href': '#',
|
||||
'aria-controls': settings.sTableId,
|
||||
'data-dt-idx': counter,
|
||||
'tabindex': settings.iTabIndex
|
||||
} )
|
||||
.html( btnDisplay )
|
||||
)
|
||||
.appendTo( container );
|
||||
|
||||
settings.oApi._fnBindAction(
|
||||
node, {action: button}, clickHandler
|
||||
);
|
||||
|
||||
counter++;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// IE9 throws an 'unknown error' if document.activeElement is used
|
||||
// inside an iframe or frame.
|
||||
var activeEl;
|
||||
|
||||
try {
|
||||
// Because this approach is destroying and recreating the paging
|
||||
// elements, focus is lost on the select button which is bad for
|
||||
// accessibility. So we want to restore focus once the draw has
|
||||
// completed
|
||||
activeEl = $(host).find(document.activeElement).data('dt-idx');
|
||||
}
|
||||
catch (e) {}
|
||||
|
||||
attach(
|
||||
$(host).empty().html('<ul class="pagination"/>').children('ul'),
|
||||
buttons
|
||||
);
|
||||
|
||||
if ( activeEl ) {
|
||||
$(host).find( '[data-dt-idx='+activeEl+']' ).focus();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* TableTools Bootstrap compatibility
|
||||
* Required TableTools 2.1+
|
||||
*/
|
||||
if ( DataTable.TableTools ) {
|
||||
// Set the classes that TableTools uses to something suitable for Bootstrap
|
||||
$.extend( true, DataTable.TableTools.classes, {
|
||||
"container": "DTTT btn-group",
|
||||
"buttons": {
|
||||
"normal": "btn btn-default",
|
||||
"disabled": "disabled"
|
||||
},
|
||||
"collection": {
|
||||
"container": "DTTT_dropdown dropdown-menu",
|
||||
"buttons": {
|
||||
"normal": "",
|
||||
"disabled": "disabled"
|
||||
}
|
||||
},
|
||||
"print": {
|
||||
"info": "DTTT_print_info"
|
||||
},
|
||||
"select": {
|
||||
"row": "active"
|
||||
}
|
||||
} );
|
||||
|
||||
// Have the collection use a bootstrap compatible drop down
|
||||
$.extend( true, DataTable.TableTools.DEFAULTS.oTags, {
|
||||
"collection": {
|
||||
"container": "ul",
|
||||
"button": "li",
|
||||
"liner": "a"
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
}; // /factory
|
||||
|
||||
|
||||
// Define as an AMD module if possible
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
define( ['jquery', 'datatables'], factory );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// Node/CommonJS
|
||||
factory( require('jquery'), require('datatables') );
|
||||
}
|
||||
else if ( jQuery ) {
|
||||
// Otherwise simply initialise as normal, stopping multiple evaluation
|
||||
factory( jQuery, jQuery.fn.dataTable );
|
||||
}
|
||||
|
||||
|
||||
})(window, document);
|
||||
|
||||
146
media/js/dataTables.foundation.js
Normal file
146
media/js/dataTables.foundation.js
Normal file
@ -0,0 +1,146 @@
|
||||
/*! DataTables Foundation integration
|
||||
* ©2011-2014 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
/**
|
||||
* DataTables integration for Foundation. This requires Foundation 5 and
|
||||
* DataTables 1.10 or newer.
|
||||
*
|
||||
* This file sets the defaults and adds options to DataTables to style its
|
||||
* controls using Foundation. See http://datatables.net/manual/styling/foundation
|
||||
* for further information.
|
||||
*/
|
||||
(function(window, document, undefined){
|
||||
|
||||
var factory = function( $, DataTable ) {
|
||||
"use strict";
|
||||
|
||||
|
||||
$.extend( DataTable.ext.classes, {
|
||||
sWrapper: "dataTables_wrapper dt-foundation"
|
||||
} );
|
||||
|
||||
|
||||
/* Set the defaults for DataTables initialisation */
|
||||
$.extend( true, DataTable.defaults, {
|
||||
dom:
|
||||
"<'row'<'small-6 columns'l><'small-6 columns'f>r>"+
|
||||
"t"+
|
||||
"<'row'<'small-6 columns'i><'small-6 columns'p>>",
|
||||
renderer: 'foundation'
|
||||
} );
|
||||
|
||||
|
||||
/* Page button renderer */
|
||||
DataTable.ext.renderer.pageButton.foundation = function ( settings, host, idx, buttons, page, pages ) {
|
||||
var api = new DataTable.Api( settings );
|
||||
var classes = settings.oClasses;
|
||||
var lang = settings.oLanguage.oPaginate;
|
||||
var btnDisplay, btnClass;
|
||||
|
||||
var attach = function( container, buttons ) {
|
||||
var i, ien, node, button;
|
||||
var clickHandler = function ( e ) {
|
||||
e.preventDefault();
|
||||
if ( e.data.action !== 'ellipsis' ) {
|
||||
api.page( e.data.action ).draw( 'page' );
|
||||
}
|
||||
};
|
||||
|
||||
for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
|
||||
button = buttons[i];
|
||||
|
||||
if ( $.isArray( button ) ) {
|
||||
attach( container, button );
|
||||
}
|
||||
else {
|
||||
btnDisplay = '';
|
||||
btnClass = '';
|
||||
|
||||
switch ( button ) {
|
||||
case 'ellipsis':
|
||||
btnDisplay = '…';
|
||||
btnClass = 'unavailable';
|
||||
break;
|
||||
|
||||
case 'first':
|
||||
btnDisplay = lang.sFirst;
|
||||
btnClass = button + (page > 0 ?
|
||||
'' : ' unavailable');
|
||||
break;
|
||||
|
||||
case 'previous':
|
||||
btnDisplay = lang.sPrevious;
|
||||
btnClass = button + (page > 0 ?
|
||||
'' : ' unavailable');
|
||||
break;
|
||||
|
||||
case 'next':
|
||||
btnDisplay = lang.sNext;
|
||||
btnClass = button + (page < pages-1 ?
|
||||
'' : ' unavailable');
|
||||
break;
|
||||
|
||||
case 'last':
|
||||
btnDisplay = lang.sLast;
|
||||
btnClass = button + (page < pages-1 ?
|
||||
'' : ' unavailable');
|
||||
break;
|
||||
|
||||
default:
|
||||
btnDisplay = button + 1;
|
||||
btnClass = page === button ?
|
||||
'current' : '';
|
||||
break;
|
||||
}
|
||||
|
||||
if ( btnDisplay ) {
|
||||
node = $('<li>', {
|
||||
'class': classes.sPageButton+' '+btnClass,
|
||||
'aria-controls': settings.sTableId,
|
||||
'tabindex': settings.iTabIndex,
|
||||
'id': idx === 0 && typeof button === 'string' ?
|
||||
settings.sTableId +'_'+ button :
|
||||
null
|
||||
} )
|
||||
.append( $('<a>', {
|
||||
'href': '#'
|
||||
} )
|
||||
.html( btnDisplay )
|
||||
)
|
||||
.appendTo( container );
|
||||
|
||||
settings.oApi._fnBindAction(
|
||||
node, {action: button}, clickHandler
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
attach(
|
||||
$(host).empty().html('<ul class="pagination"/>').children('ul'),
|
||||
buttons
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
}; // /factory
|
||||
|
||||
|
||||
// Define as an AMD module if possible
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
define( ['jquery', 'datatables'], factory );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// Node/CommonJS
|
||||
factory( require('jquery'), require('datatables') );
|
||||
}
|
||||
else if ( jQuery ) {
|
||||
// Otherwise simply initialise as normal, stopping multiple evaluation
|
||||
factory( jQuery, jQuery.fn.dataTable );
|
||||
}
|
||||
|
||||
|
||||
})(window, document);
|
||||
|
||||
156
media/js/dataTables.jqueryui.js
Normal file
156
media/js/dataTables.jqueryui.js
Normal file
@ -0,0 +1,156 @@
|
||||
/*! DataTables jQuery UI integration
|
||||
* ©2011-2014 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
/**
|
||||
* DataTables integration for jQuery UI. This requires jQuery UI and
|
||||
* DataTables 1.10 or newer.
|
||||
*
|
||||
* This file sets the defaults and adds options to DataTables to style its
|
||||
* controls using jQuery UI. See http://datatables.net/manual/styling/jqueryui
|
||||
* for further information.
|
||||
*/
|
||||
(function(window, document, undefined){
|
||||
|
||||
var factory = function( $, DataTable ) {
|
||||
"use strict";
|
||||
|
||||
|
||||
var sort_prefix = 'css_right ui-icon ui-icon-';
|
||||
var toolbar_prefix = 'fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-';
|
||||
|
||||
/* Set the defaults for DataTables initialisation */
|
||||
$.extend( true, DataTable.defaults, {
|
||||
dom:
|
||||
'<"'+toolbar_prefix+'tl ui-corner-tr"lfr>'+
|
||||
't'+
|
||||
'<"'+toolbar_prefix+'bl ui-corner-br"ip>',
|
||||
renderer: 'jqueryui'
|
||||
} );
|
||||
|
||||
|
||||
$.extend( DataTable.ext.classes, {
|
||||
"sWrapper": "dataTables_wrapper dt-jqueryui",
|
||||
|
||||
/* Full numbers paging buttons */
|
||||
"sPageButton": "fg-button ui-button ui-state-default",
|
||||
"sPageButtonActive": "ui-state-disabled",
|
||||
"sPageButtonDisabled": "ui-state-disabled",
|
||||
|
||||
/* Features */
|
||||
"sPaging": "dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi "+
|
||||
"ui-buttonset-multi paging_", /* Note that the type is postfixed */
|
||||
|
||||
/* Sorting */
|
||||
"sSortAsc": "ui-state-default sorting_asc",
|
||||
"sSortDesc": "ui-state-default sorting_desc",
|
||||
"sSortable": "ui-state-default sorting",
|
||||
"sSortableAsc": "ui-state-default sorting_asc_disabled",
|
||||
"sSortableDesc": "ui-state-default sorting_desc_disabled",
|
||||
"sSortableNone": "ui-state-default sorting_disabled",
|
||||
"sSortIcon": "DataTables_sort_icon",
|
||||
|
||||
/* Scrolling */
|
||||
"sScrollHead": "dataTables_scrollHead "+"ui-state-default",
|
||||
"sScrollFoot": "dataTables_scrollFoot "+"ui-state-default",
|
||||
|
||||
/* Misc */
|
||||
"sHeaderTH": "ui-state-default",
|
||||
"sFooterTH": "ui-state-default"
|
||||
} );
|
||||
|
||||
|
||||
DataTable.ext.renderer.header.jqueryui = function ( settings, cell, column, classes ) {
|
||||
// Calculate what the unsorted class should be
|
||||
var noSortAppliedClass = sort_prefix+'carat-2-n-s';
|
||||
var asc = $.inArray('asc', column.asSorting) !== -1;
|
||||
var desc = $.inArray('desc', column.asSorting) !== -1;
|
||||
|
||||
if ( !column.bSortable || (!asc && !desc) ) {
|
||||
noSortAppliedClass = '';
|
||||
}
|
||||
else if ( asc && !desc ) {
|
||||
noSortAppliedClass = sort_prefix+'carat-1-n';
|
||||
}
|
||||
else if ( !asc && desc ) {
|
||||
noSortAppliedClass = sort_prefix+'carat-1-s';
|
||||
}
|
||||
|
||||
// Setup the DOM structure
|
||||
$('<div/>')
|
||||
.addClass( 'DataTables_sort_wrapper' )
|
||||
.append( cell.contents() )
|
||||
.append( $('<span/>')
|
||||
.addClass( classes.sSortIcon+' '+noSortAppliedClass )
|
||||
)
|
||||
.appendTo( cell );
|
||||
|
||||
// Attach a sort listener to update on sort
|
||||
$(settings.nTable).on( 'order.dt', function ( e, ctx, sorting, columns ) {
|
||||
if ( settings !== ctx ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var colIdx = column.idx;
|
||||
|
||||
cell
|
||||
.removeClass( classes.sSortAsc +" "+classes.sSortDesc )
|
||||
.addClass( columns[ colIdx ] == 'asc' ?
|
||||
classes.sSortAsc : columns[ colIdx ] == 'desc' ?
|
||||
classes.sSortDesc :
|
||||
column.sSortingClass
|
||||
);
|
||||
|
||||
cell
|
||||
.find( 'span.'+classes.sSortIcon )
|
||||
.removeClass(
|
||||
sort_prefix+'triangle-1-n' +" "+
|
||||
sort_prefix+'triangle-1-s' +" "+
|
||||
sort_prefix+'carat-2-n-s' +" "+
|
||||
sort_prefix+'carat-1-n' +" "+
|
||||
sort_prefix+'carat-1-s'
|
||||
)
|
||||
.addClass( columns[ colIdx ] == 'asc' ?
|
||||
sort_prefix+'triangle-1-n' : columns[ colIdx ] == 'desc' ?
|
||||
sort_prefix+'triangle-1-s' :
|
||||
noSortAppliedClass
|
||||
);
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* TableTools jQuery UI compatibility
|
||||
* Required TableTools 2.1+
|
||||
*/
|
||||
if ( DataTable.TableTools ) {
|
||||
$.extend( true, DataTable.TableTools.classes, {
|
||||
"container": "DTTT_container ui-buttonset ui-buttonset-multi",
|
||||
"buttons": {
|
||||
"normal": "DTTT_button ui-button ui-state-default"
|
||||
},
|
||||
"collection": {
|
||||
"container": "DTTT_collection ui-buttonset ui-buttonset-multi"
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
}; // /factory
|
||||
|
||||
|
||||
// Define as an AMD module if possible
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
define( ['jquery', 'datatables'], factory );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// Node/CommonJS
|
||||
factory( require('jquery'), require('datatables') );
|
||||
}
|
||||
else if ( jQuery ) {
|
||||
// Otherwise simply initialise as normal, stopping multiple evaluation
|
||||
factory( jQuery, jQuery.fn.dataTable );
|
||||
}
|
||||
|
||||
|
||||
})(window, document);
|
||||
|
||||
80
media/unit_testing/tests/ids.js
Normal file
80
media/unit_testing/tests/ids.js
Normal file
@ -0,0 +1,80 @@
|
||||
// DATA_TEMPLATE: empty_table
|
||||
oTest.fnStart( "Row ids" );
|
||||
|
||||
$(document).ready( function () {
|
||||
var table = $('#example').DataTable( {
|
||||
"ajax": "../../../examples/ajax/data/objects.txt",
|
||||
"deferRender": true,
|
||||
"rowId": 'name',
|
||||
"columns": [
|
||||
{ "data": "name" },
|
||||
{ "data": "position" },
|
||||
{ "data": "office" },
|
||||
{ "data": "extn" },
|
||||
{ "data": "start_date" },
|
||||
{ "data": "salary" }
|
||||
]
|
||||
} );
|
||||
|
||||
/* Basic checks */
|
||||
oTest.fnWaitTest(
|
||||
"Table draws",
|
||||
null,
|
||||
function () { return $('tbody td:eq(0)').text() === 'Airi Satou'; }
|
||||
);
|
||||
|
||||
oTest.fnTest(
|
||||
"First row has an ID assigned",
|
||||
null,
|
||||
function () { return $('tbody tr:eq(0)').attr('id') === 'Airi Satou'; }
|
||||
);
|
||||
|
||||
oTest.fnTest(
|
||||
"Can select first row by ID via API",
|
||||
null,
|
||||
function () { return table.row('#Airi Satou').data().name === 'Airi Satou'; }
|
||||
);
|
||||
|
||||
oTest.fnTest(
|
||||
"Can select second row by ID via API",
|
||||
null,
|
||||
function () { return table.row('#Angelica Ramos').data().extn === '5797'; }
|
||||
);
|
||||
|
||||
oTest.fnTest(
|
||||
"Can select 11th row (deferred rendering) by ID via API - node doesn't exist",
|
||||
null,
|
||||
function () { return table.row('#Charde Marshall').data().extn === '6741'; }
|
||||
);
|
||||
|
||||
oTest.fnTest(
|
||||
"Get id for a row",
|
||||
null,
|
||||
function () { return table.row('#Dai Rios').id() === 'Dai Rios'; }
|
||||
);
|
||||
|
||||
oTest.fnTest(
|
||||
"Get id for a row with a hash",
|
||||
null,
|
||||
function () { return table.row('#Dai Rios').id(true) === '#Dai Rios'; }
|
||||
);
|
||||
|
||||
oTest.fnTest(
|
||||
"Get ids for a rows",
|
||||
null,
|
||||
function () {
|
||||
return JSON.stringify(table.rows([':eq(0)', ':eq(1)']).ids().toArray()) === '["Airi Satou","Angelica Ramos"]';
|
||||
}
|
||||
);
|
||||
|
||||
oTest.fnTest(
|
||||
"Get ids for a rows with a hash",
|
||||
null,
|
||||
function () {
|
||||
return JSON.stringify(table.rows([':eq(0)', ':eq(1)']).ids(true).toArray()) === '["#Airi Satou","#Angelica Ramos"]';
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
oTest.fnComplete();
|
||||
} );
|
||||
Loading…
Reference in New Issue
Block a user