fistcommit
This commit is contained in:
Kicap
22
assets/plugin/datatables/extensions/RowReorder/License.txt
Normal file
22
assets/plugin/datatables/extensions/RowReorder/License.txt
Normal file
@ -0,0 +1,22 @@
|
||||
MIT license
|
||||
|
||||
Copyright (c) 2015 SpryMedia Limited
|
||||
http://datatables.net
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
41
assets/plugin/datatables/extensions/RowReorder/Readme.md
Normal file
41
assets/plugin/datatables/extensions/RowReorder/Readme.md
Normal file
@ -0,0 +1,41 @@
|
||||
# RowReorder
|
||||
|
||||
RowReorder adds the ability for rows in a DataTable to be reordered through user interaction with the table (click and drag / touch and drag). Integration with Editor's multi-row editing feature is also available to update rows immediately.
|
||||
|
||||
|
||||
# Installation
|
||||
|
||||
To use RowReorder the primary way to obtain the software is to use the [DataTables downloader](//datatables.net/download). You can also include the individual files from the [DataTables CDN](//cdn.datatables.net). See the [documentation](http://datatables.net/extensions/rowreorder/) for full details.
|
||||
|
||||
## NPM and Bower
|
||||
|
||||
If you prefer to use a package manager such as NPM or Bower, distribution repositories are available with software built from this repository under the name `datatables.net-rowreorder`. Styling packages for Bootstrap, Foundation and other styling libraries are also available by adding a suffix to the package name.
|
||||
|
||||
Please see the DataTables [NPM](//datatables.net/download/npm) and [Bower](//datatables.net/download/bower) installation pages for further information. The [DataTables installation manual](//datatables.net/manual/installation) also has details on how to use package managers with DataTables.
|
||||
|
||||
|
||||
# Basic usage
|
||||
|
||||
RowReorder is initialised using the `rowReorder` option in the DataTables constructor - a simple boolean `true` will enable the feature. Further options can be specified using this option as an object - see the documentation for details.
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
$(document).ready( function () {
|
||||
$('#myTable').DataTable( {
|
||||
rowReorder: true
|
||||
} );
|
||||
} );
|
||||
```
|
||||
|
||||
|
||||
# Documentation / support
|
||||
|
||||
* [Documentation](https://datatables.net/extensions/rowreorder/)
|
||||
* [DataTables support forums](http://datatables.net/forums)
|
||||
|
||||
|
||||
# GitHub
|
||||
|
||||
If you fancy getting involved with the development of RowReorder and help make it better, please refer to its [GitHub repo](https://github.com/DataTables/RowReorder).
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
table.dt-rowReorder-float {
|
||||
position: absolute !important;
|
||||
opacity: 0.8;
|
||||
table-layout: fixed;
|
||||
outline: 2px solid #337ab7;
|
||||
outline-offset: -2px;
|
||||
z-index: 2001;
|
||||
}
|
||||
|
||||
tr.dt-rowReorder-moving {
|
||||
outline: 2px solid #888;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
body.dt-rowReorder-noOverflow {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
table.dataTable td.reorder {
|
||||
text-align: center;
|
||||
cursor: move;
|
||||
}
|
||||
1
assets/plugin/datatables/extensions/RowReorder/css/rowReorder.bootstrap.min.css
vendored
Normal file
1
assets/plugin/datatables/extensions/RowReorder/css/rowReorder.bootstrap.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
table.dt-rowReorder-float{position:absolute !important;opacity:0.8;table-layout:fixed;outline:2px solid #337ab7;outline-offset:-2px;z-index:2001}tr.dt-rowReorder-moving{outline:2px solid #888;outline-offset:-2px}body.dt-rowReorder-noOverflow{overflow-x:hidden}table.dataTable td.reorder{text-align:center;cursor:move}
|
||||
@ -0,0 +1,22 @@
|
||||
table.dt-rowReorder-float {
|
||||
position: absolute !important;
|
||||
opacity: 0.8;
|
||||
table-layout: fixed;
|
||||
outline: 2px solid #0275d8;
|
||||
outline-offset: -2px;
|
||||
z-index: 2001;
|
||||
}
|
||||
|
||||
tr.dt-rowReorder-moving {
|
||||
outline: 2px solid #888;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
body.dt-rowReorder-noOverflow {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
table.dataTable td.reorder {
|
||||
text-align: center;
|
||||
cursor: move;
|
||||
}
|
||||
1
assets/plugin/datatables/extensions/RowReorder/css/rowReorder.bootstrap4.min.css
vendored
Normal file
1
assets/plugin/datatables/extensions/RowReorder/css/rowReorder.bootstrap4.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
table.dt-rowReorder-float{position:absolute !important;opacity:0.8;table-layout:fixed;outline:2px solid #0275d8;outline-offset:-2px;z-index:2001}tr.dt-rowReorder-moving{outline:2px solid #888;outline-offset:-2px}body.dt-rowReorder-noOverflow{overflow-x:hidden}table.dataTable td.reorder{text-align:center;cursor:move}
|
||||
@ -0,0 +1,22 @@
|
||||
table.dt-rowReorder-float {
|
||||
position: absolute !important;
|
||||
opacity: 0.8;
|
||||
table-layout: fixed;
|
||||
outline: 2px solid #888;
|
||||
outline-offset: -2px;
|
||||
z-index: 2001;
|
||||
}
|
||||
|
||||
tr.dt-rowReorder-moving {
|
||||
outline: 2px solid #555;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
body.dt-rowReorder-noOverflow {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
table.dataTable td.reorder {
|
||||
text-align: center;
|
||||
cursor: move;
|
||||
}
|
||||
1
assets/plugin/datatables/extensions/RowReorder/css/rowReorder.dataTables.min.css
vendored
Normal file
1
assets/plugin/datatables/extensions/RowReorder/css/rowReorder.dataTables.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
table.dt-rowReorder-float{position:absolute !important;opacity:0.8;table-layout:fixed;outline:2px solid #888;outline-offset:-2px;z-index:2001}tr.dt-rowReorder-moving{outline:2px solid #555;outline-offset:-2px}body.dt-rowReorder-noOverflow{overflow-x:hidden}table.dataTable td.reorder{text-align:center;cursor:move}
|
||||
@ -0,0 +1,22 @@
|
||||
table.dt-rowReorder-float {
|
||||
position: absolute !important;
|
||||
opacity: 0.8;
|
||||
table-layout: fixed;
|
||||
outline: 2px solid #337ab7;
|
||||
outline-offset: -2px;
|
||||
z-index: 2001;
|
||||
}
|
||||
|
||||
tr.dt-rowReorder-moving {
|
||||
outline: 2px solid #888;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
body.dt-rowReorder-noOverflow {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
table.dataTable td.reorder {
|
||||
text-align: center;
|
||||
cursor: move;
|
||||
}
|
||||
1
assets/plugin/datatables/extensions/RowReorder/css/rowReorder.foundation.min.css
vendored
Normal file
1
assets/plugin/datatables/extensions/RowReorder/css/rowReorder.foundation.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
table.dt-rowReorder-float{position:absolute !important;opacity:0.8;table-layout:fixed;outline:2px solid #337ab7;outline-offset:-2px;z-index:2001}tr.dt-rowReorder-moving{outline:2px solid #888;outline-offset:-2px}body.dt-rowReorder-noOverflow{overflow-x:hidden}table.dataTable td.reorder{text-align:center;cursor:move}
|
||||
@ -0,0 +1,22 @@
|
||||
table.dt-rowReorder-float {
|
||||
position: absolute !important;
|
||||
opacity: 0.8;
|
||||
table-layout: fixed;
|
||||
outline: 2px solid #888;
|
||||
outline-offset: -2px;
|
||||
z-index: 2001;
|
||||
}
|
||||
|
||||
tr.dt-rowReorder-moving {
|
||||
outline: 2px solid #555;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
body.dt-rowReorder-noOverflow {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
table.dataTable td.reorder {
|
||||
text-align: center;
|
||||
cursor: move;
|
||||
}
|
||||
1
assets/plugin/datatables/extensions/RowReorder/css/rowReorder.jqueryui.min.css
vendored
Normal file
1
assets/plugin/datatables/extensions/RowReorder/css/rowReorder.jqueryui.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
table.dt-rowReorder-float{position:absolute !important;opacity:0.8;table-layout:fixed;outline:2px solid #888;outline-offset:-2px;z-index:2001}tr.dt-rowReorder-moving{outline:2px solid #555;outline-offset:-2px}body.dt-rowReorder-noOverflow{overflow-x:hidden}table.dataTable td.reorder{text-align:center;cursor:move}
|
||||
@ -0,0 +1,22 @@
|
||||
table.dt-rowReorder-float {
|
||||
position: absolute !important;
|
||||
opacity: 0.8;
|
||||
table-layout: fixed;
|
||||
outline: 2px solid rgba(0, 0, 0, 0.05);
|
||||
outline-offset: -2px;
|
||||
z-index: 2001;
|
||||
}
|
||||
|
||||
tr.dt-rowReorder-moving {
|
||||
outline: 2px solid #888;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
body.dt-rowReorder-noOverflow {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
table.dataTable td.reorder {
|
||||
text-align: center;
|
||||
cursor: move;
|
||||
}
|
||||
1
assets/plugin/datatables/extensions/RowReorder/css/rowReorder.semanticui.min.css
vendored
Normal file
1
assets/plugin/datatables/extensions/RowReorder/css/rowReorder.semanticui.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
table.dt-rowReorder-float{position:absolute !important;opacity:0.8;table-layout:fixed;outline:2px solid rgba(0,0,0,0.05);outline-offset:-2px;z-index:2001}tr.dt-rowReorder-moving{outline:2px solid #888;outline-offset:-2px}body.dt-rowReorder-noOverflow{overflow-x:hidden}table.dataTable td.reorder{text-align:center;cursor:move}
|
||||
@ -0,0 +1,5 @@
|
||||
|
||||
$move-outline: 2px solid #0275d8 !default;
|
||||
$moved-outline: 2px solid #888 !default;
|
||||
|
||||
@import 'rowReorder.dataTables.scss';
|
||||
@ -0,0 +1,94 @@
|
||||
<!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">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<title>RowReorder examples - RowReorder examples</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>RowReorder example <span>RowReorder examples</span></h1>
|
||||
<div class="info">
|
||||
<p>RowReorder adds the ability for rows in a DataTable to be reordered through user interaction with the table (click and drag / touch and drag). Integration with
|
||||
Editor's multi-row editing feature is also available to update rows immediately.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./initialisation/index.html">Initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./initialisation/simple.html">Basic initialisation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./initialisation/restrictedOrdering.html">Restricted column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./initialisation/responsive.html">Mobile support (Responsive integration)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./initialisation/selector.html">Full row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./initialisation/events.html">Reorder event</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./initialisation/scroll.html">DataTables Scrolling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./initialisation/defaults.html">Defaults</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./styling/reorderClass.html">Selector cell styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/snapX.html">Horizontal snap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/semanticui.html">Semantic UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/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-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,669 @@
|
||||
<!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>RowReorder example - Defaults</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/rowReorder.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.rowReorder.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
// Set the RowReorder defaults
|
||||
$.extend(
|
||||
$.fn.dataTable.RowReorder.defaults,
|
||||
{ selector: 'tr' }
|
||||
);
|
||||
|
||||
// Enable RowReorder by default
|
||||
$.fn.dataTable.defaults.rowReorder = true;
|
||||
|
||||
$(document).ready( function() {
|
||||
$('#example').DataTable();
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>RowReorder example <span>Defaults</span></h1>
|
||||
<div class="info">
|
||||
<p>Being able to configure default values for RowReorder and enable it by default on DataTables can be quite useful. Defaults for RowReorder can be configured on
|
||||
the <code>$.fn.dataTable.RowReorder.defaults</code> object or <code>$.fn.dataTable.defaults.rowReorder</code>.</p>
|
||||
<p>This example shows both being used, with RowReorder being configured to use the whole row as a selector.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>22</td>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>41</td>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>55</td>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>21</td>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>46</td>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>50</td>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>26</td>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18</td>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>13</td>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>23</td>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14</td>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12</td>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>54</td>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>37</td>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>32</td>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>35</td>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>48</td>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>45</td>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>17</td>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>57</td>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>29</td>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>56</td>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>36</td>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>51</td>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20</td>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>39</td>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>40</td>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>47</td>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>52</td>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24</td>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>38</td>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>53</td>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>30</td>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>28</td>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>34</td>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>31</td>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>44</td>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>42</td>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>27</td>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>49</td>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15</td>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>25</td>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>33</td>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>43</td>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>16</td>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19</td>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</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">// Set the RowReorder defaults
|
||||
$.extend(
|
||||
$.fn.dataTable.RowReorder.defaults,
|
||||
{ selector: 'tr' }
|
||||
);
|
||||
|
||||
// Enable RowReorder by default
|
||||
$.fn.dataTable.defaults.rowReorder = true;
|
||||
|
||||
$(document).ready( function() {
|
||||
$('#example').DataTable();
|
||||
} );</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.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.rowReorder.js">../../js/dataTables.rowReorder.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/rowReorder.dataTables.css">../../css/rowReorder.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">Initialisation</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Basic initialisation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./restrictedOrdering.html">Restricted column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./responsive.html">Mobile support (Responsive integration)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./selector.html">Full row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./events.html">Reorder event</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scroll.html">DataTables Scrolling</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./defaults.html">Defaults</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/reorderClass.html">Selector cell styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/snapX.html">Horizontal snap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/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-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,701 @@
|
||||
<!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>RowReorder example - Reorder event</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/rowReorder.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
#result {
|
||||
border: 1px solid #888;
|
||||
background: #f7f7f7;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.rowReorder.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
var table = $('#example').DataTable( {
|
||||
rowReorder: true
|
||||
} );
|
||||
|
||||
table.on( 'row-reorder', function ( e, diff, edit ) {
|
||||
var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'<br>';
|
||||
|
||||
for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
|
||||
var rowData = table.row( diff[i].node ).data();
|
||||
|
||||
result += rowData[1]+' updated to be in position '+
|
||||
diff[i].newData+' (was '+diff[i].oldData+')<br>';
|
||||
}
|
||||
|
||||
$('#result').html( 'Event result:<br>'+result );
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>RowReorder example <span>Reorder event</span></h1>
|
||||
<div class="info">
|
||||
<p>Providing the UI to allow end users to reorder a table is only half of the story - likely you will wish to have the changes caused by the end user to effect a
|
||||
database or some other data store. This can be done by listening for the <a href="//datatables.net/reference/event/row-reorder"><code class="event" title=
|
||||
"RowReorder event">row-reorder</code></a> event.</p>
|
||||
<p>This examples shows how the <a href="//datatables.net/reference/event/row-reorder"><code class="event" title="RowReorder event">row-reorder</code></a> event can
|
||||
be listened for and an action taken when it is triggered. In this case we simply output data about the change to the page, but a more sophisticated use case might
|
||||
involve using Ajax to inform a server-side about the change.</p>
|
||||
<p>An example of <a href="http://editor.datatables.net/examples/extensions/rowReorder.html">Editor using RowReorder</a> making use of Editor's multi-row editing
|
||||
ability, is available on the Editor web-site.</p>
|
||||
</div>
|
||||
<div id="result">
|
||||
Event result:
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>22</td>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>41</td>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>55</td>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>21</td>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>46</td>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>50</td>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>26</td>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18</td>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>13</td>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>23</td>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14</td>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12</td>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>54</td>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>37</td>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>32</td>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>35</td>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>48</td>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>45</td>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>17</td>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>57</td>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>29</td>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>56</td>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>36</td>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>51</td>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20</td>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>39</td>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>40</td>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>47</td>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>52</td>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24</td>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>38</td>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>53</td>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>30</td>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>28</td>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>34</td>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>31</td>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>44</td>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>42</td>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>27</td>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>49</td>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15</td>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>25</td>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>33</td>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>43</td>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>16</td>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19</td>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</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() {
|
||||
var table = $('#example').DataTable( {
|
||||
rowReorder: true
|
||||
} );
|
||||
|
||||
table.on( 'row-reorder', function ( e, diff, edit ) {
|
||||
var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'<br>';
|
||||
|
||||
for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
|
||||
var rowData = table.row( diff[i].node ).data();
|
||||
|
||||
result += rowData[1]+' updated to be in position '+
|
||||
diff[i].newData+' (was '+diff[i].oldData+')<br>';
|
||||
}
|
||||
|
||||
$('#result').html( 'Event result:<br>'+result );
|
||||
} );
|
||||
} );</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.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.rowReorder.js">../../js/dataTables.rowReorder.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">#result {
|
||||
border: 1px solid #888;
|
||||
background: #f7f7f7;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
}</code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/rowReorder.dataTables.css">../../css/rowReorder.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">Initialisation</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Basic initialisation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./restrictedOrdering.html">Restricted column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./responsive.html">Mobile support (Responsive integration)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./selector.html">Full row selection</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./events.html">Reorder event</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scroll.html">DataTables Scrolling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defaults.html">Defaults</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/reorderClass.html">Selector cell styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/snapX.html">Horizontal snap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/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-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,67 @@
|
||||
<!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">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<title>RowReorder examples - Initialisation</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>RowReorder example <span>Initialisation</span></h1>
|
||||
<div class="info">
|
||||
<p>The following examples show the basic initialisation, features and options of RowReorder.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./simple.html">Basic initialisation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./restrictedOrdering.html">Restricted column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./responsive.html">Mobile support (Responsive integration)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./selector.html">Full row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./events.html">Reorder event</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scroll.html">DataTables Scrolling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defaults.html">Defaults</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-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,670 @@
|
||||
<!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>RowReorder example - Mobile support (Responsive integration)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/rowReorder.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../Responsive/css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.rowReorder.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../Responsive/js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
var table = $('#example').DataTable( {
|
||||
rowReorder: {
|
||||
selector: 'td:nth-child(2)'
|
||||
},
|
||||
responsive: true
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>RowReorder example <span>Mobile support (Responsive integration)</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows RowReorder being used with the Responsive extension for DataTables and also that it provides support for touch inputs to perform a row
|
||||
reorder. Responsive is particularly useful with mobile devices, but can also be useful on desktops where complex data sets are shown in the DataTable.</p>
|
||||
<p>Note that the row reordering in this example is triggered by dragging the cells in the second column.</p>
|
||||
</div>
|
||||
<table id="example" class="display nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>22</td>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>41</td>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>55</td>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>21</td>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>46</td>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>50</td>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>26</td>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18</td>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>13</td>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>23</td>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14</td>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12</td>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>54</td>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>37</td>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>32</td>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>35</td>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>48</td>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>45</td>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>17</td>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>57</td>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>29</td>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>56</td>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>36</td>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>51</td>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20</td>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>39</td>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>40</td>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>47</td>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>52</td>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24</td>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>38</td>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>53</td>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>30</td>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>28</td>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>34</td>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>31</td>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>44</td>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>42</td>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>27</td>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>49</td>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15</td>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>25</td>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>33</td>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>43</td>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>16</td>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19</td>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</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() {
|
||||
var table = $('#example').DataTable( {
|
||||
rowReorder: {
|
||||
selector: 'td:nth-child(2)'
|
||||
},
|
||||
responsive: true
|
||||
} );
|
||||
} );</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.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.rowReorder.js">../../js/dataTables.rowReorder.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../Responsive/js/dataTables.responsive.js">../../../Responsive/js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/rowReorder.dataTables.css">../../css/rowReorder.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../Responsive/css/responsive.dataTables.css">../../../Responsive/css/responsive.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">Initialisation</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Basic initialisation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./restrictedOrdering.html">Restricted column ordering</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./responsive.html">Mobile support (Responsive integration)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./selector.html">Full row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./events.html">Reorder event</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scroll.html">DataTables Scrolling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defaults.html">Defaults</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/reorderClass.html">Selector cell styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/snapX.html">Horizontal snap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/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-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,668 @@
|
||||
<!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>RowReorder example - Restricted column ordering</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/rowReorder.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.rowReorder.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
var table = $('#example').DataTable( {
|
||||
rowReorder: true,
|
||||
columnDefs: [
|
||||
{ orderable: true, className: 'reorder', targets: 0 },
|
||||
{ orderable: false, targets: '_all' }
|
||||
]
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>RowReorder example <span>Restricted column ordering</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows the same information as the <a href="simple.html">simple example</a>, but in this case restricts the column ordering that can be applied to
|
||||
the table to just the sequence number column. Generally this will be the configuration that RowReorder will be used in, as ordering by other columns can make the
|
||||
reordering potentially quite confusing for the end user.</p>
|
||||
<p>The restriction to the first column only for ordering is applied through the <a href="//datatables.net/reference/option/columnDefs"><code class="option" title=
|
||||
"DataTables initialisation option">columnDefs</code></a> option and <a href="//datatables.net/reference/option/columns.orderable"><code class="option" title=
|
||||
"DataTables initialisation option">columns.orderable</code></a>. The <a href="//datatables.net/reference/option/columnDefs"><code class="option" title=
|
||||
"DataTables initialisation option">columnDefs</code></a> are applied in descending priority order, so the first entry overrides the second for the first
|
||||
column.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>22</td>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>41</td>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>55</td>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>21</td>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>46</td>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>50</td>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>26</td>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18</td>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>13</td>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>23</td>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14</td>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12</td>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>54</td>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>37</td>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>32</td>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>35</td>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>48</td>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>45</td>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>17</td>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>57</td>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>29</td>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>56</td>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>36</td>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>51</td>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20</td>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>39</td>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>40</td>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>47</td>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>52</td>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24</td>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>38</td>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>53</td>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>30</td>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>28</td>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>34</td>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>31</td>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>44</td>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>42</td>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>27</td>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>49</td>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15</td>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>25</td>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>33</td>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>43</td>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>16</td>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19</td>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</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() {
|
||||
var table = $('#example').DataTable( {
|
||||
rowReorder: true,
|
||||
columnDefs: [
|
||||
{ orderable: true, className: 'reorder', targets: 0 },
|
||||
{ orderable: false, targets: '_all' }
|
||||
]
|
||||
} );
|
||||
} );</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.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.rowReorder.js">../../js/dataTables.rowReorder.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/rowReorder.dataTables.css">../../css/rowReorder.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">Initialisation</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Basic initialisation</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./restrictedOrdering.html">Restricted column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./responsive.html">Mobile support (Responsive integration)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./selector.html">Full row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./events.html">Reorder event</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scroll.html">DataTables Scrolling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defaults.html">Defaults</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/reorderClass.html">Selector cell styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/snapX.html">Horizontal snap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/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-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,658 @@
|
||||
<!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>RowReorder example - DataTables Scrolling</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/rowReorder.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.rowReorder.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
var table = $('#example').DataTable( {
|
||||
rowReorder: true,
|
||||
scrollY: 300,
|
||||
paging: false
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>RowReorder example <span>DataTables Scrolling</span></h1>
|
||||
<div class="info">
|
||||
<p>This example is used to show RowReorder's support for DataTables <a href="//datatables.net/reference/option/scrollY"><code class="option" title=
|
||||
"DataTables initialisation option">scrollY</code></a> feature. As the dragged row approaches the boundary of the table, the table will start to scroll.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>22</td>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>41</td>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>55</td>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>21</td>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>46</td>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>50</td>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>26</td>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18</td>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>13</td>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>23</td>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14</td>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12</td>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>54</td>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>37</td>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>32</td>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>35</td>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>48</td>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>45</td>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>17</td>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>57</td>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>29</td>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>56</td>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>36</td>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>51</td>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20</td>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>39</td>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>40</td>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>47</td>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>52</td>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24</td>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>38</td>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>53</td>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>30</td>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>28</td>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>34</td>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>31</td>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>44</td>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>42</td>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>27</td>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>49</td>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15</td>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>25</td>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>33</td>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>43</td>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>16</td>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19</td>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</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() {
|
||||
var table = $('#example').DataTable( {
|
||||
rowReorder: true,
|
||||
scrollY: 300,
|
||||
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.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.rowReorder.js">../../js/dataTables.rowReorder.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/rowReorder.dataTables.css">../../css/rowReorder.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">Initialisation</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Basic initialisation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./restrictedOrdering.html">Restricted column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./responsive.html">Mobile support (Responsive integration)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./selector.html">Full row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./events.html">Reorder event</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./scroll.html">DataTables Scrolling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defaults.html">Defaults</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/reorderClass.html">Selector cell styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/snapX.html">Horizontal snap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/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-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,667 @@
|
||||
<!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>RowReorder example - Full row selection</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/rowReorder.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.rowReorder.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
var table = $('#example').DataTable( {
|
||||
rowReorder: {
|
||||
selector: 'tr'
|
||||
},
|
||||
columnDefs: [
|
||||
{ targets: 0, visible: false }
|
||||
]
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>RowReorder example <span>Full row selection</span></h1>
|
||||
<div class="info">
|
||||
<p>The <a href="//datatables.net/reference/option/rowReorder.selector"><code class="option" title="RowReorder initialisation option">rowReorder.selector</code></a>
|
||||
option provides the ability to define which element in a table row will provide the row reordering handle to the end user. This could be a button in an
|
||||
<em>Actions</em> column (which might also provide options for editing and deleting a row), or any other element.</p>
|
||||
<p>By default only the first cell in the row will trigger the reordering action. This example shows the entire row being able to start the reorder. Simply click
|
||||
and drag anywhere on the row. Additionally, the column that defines the row order is hidden by default, making the table a simple orderable list.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>22</td>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>41</td>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>55</td>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>21</td>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>46</td>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>50</td>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>26</td>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18</td>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>13</td>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>23</td>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14</td>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12</td>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>54</td>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>37</td>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>32</td>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>35</td>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>48</td>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>45</td>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>17</td>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>57</td>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>29</td>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>56</td>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>36</td>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>51</td>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20</td>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>39</td>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>40</td>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>47</td>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>52</td>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24</td>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>38</td>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>53</td>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>30</td>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>28</td>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>34</td>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>31</td>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>44</td>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>42</td>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>27</td>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>49</td>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15</td>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>25</td>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>33</td>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>43</td>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>16</td>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19</td>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</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() {
|
||||
var table = $('#example').DataTable( {
|
||||
rowReorder: {
|
||||
selector: 'tr'
|
||||
},
|
||||
columnDefs: [
|
||||
{ targets: 0, visible: 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.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.rowReorder.js">../../js/dataTables.rowReorder.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/rowReorder.dataTables.css">../../css/rowReorder.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">Initialisation</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./simple.html">Basic initialisation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./restrictedOrdering.html">Restricted column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./responsive.html">Mobile support (Responsive integration)</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./selector.html">Full row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./events.html">Reorder event</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scroll.html">DataTables Scrolling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defaults.html">Defaults</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/reorderClass.html">Selector cell styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/snapX.html">Horizontal snap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/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-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,657 @@
|
||||
<!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>RowReorder example - Basic initialisation</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/rowReorder.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.rowReorder.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
var table = $('#example').DataTable( {
|
||||
rowReorder: true
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>RowReorder example <span>Basic initialisation</span></h1>
|
||||
<div class="info">
|
||||
<p>This trivial example shows the use of the <a href="//datatables.net/reference/option/rowReorder"><code class="option" title=
|
||||
"RowReorder initialisation option">rowReorder</code></a> property being used to enable RowReorder on a DataTable. The first column in the table is a sequence
|
||||
number that provides the basis for the ordering. To change a row's order, simply click and drag the row.</p>
|
||||
<p>Note that ordering is enabled on all columns in this example - you may wish to <a href="restrictedOrdering.html">restrict ordering to just the sequence
|
||||
column</a> to help prevent potential user confusion if they reorder when the table ordering is performed on a different column.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>22</td>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>41</td>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>55</td>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>21</td>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>46</td>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>50</td>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>26</td>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18</td>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>13</td>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>23</td>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14</td>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12</td>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>54</td>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>37</td>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>32</td>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>35</td>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>48</td>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>45</td>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>17</td>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>57</td>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>29</td>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>56</td>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>36</td>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>51</td>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20</td>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>39</td>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>40</td>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>47</td>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>52</td>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24</td>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>38</td>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>53</td>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>30</td>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>28</td>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>34</td>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>31</td>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>44</td>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>42</td>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>27</td>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>49</td>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15</td>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>25</td>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>33</td>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>43</td>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>16</td>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19</td>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</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() {
|
||||
var table = $('#example').DataTable( {
|
||||
rowReorder: true
|
||||
} );
|
||||
} );</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.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.rowReorder.js">../../js/dataTables.rowReorder.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/rowReorder.dataTables.css">../../css/rowReorder.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">Initialisation</a></h3>
|
||||
<ul class="toc active">
|
||||
<li class="active">
|
||||
<a href="./simple.html">Basic initialisation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./restrictedOrdering.html">Restricted column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./responsive.html">Mobile support (Responsive integration)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./selector.html">Full row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./events.html">Reorder event</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scroll.html">DataTables Scrolling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./defaults.html">Defaults</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/reorderClass.html">Selector cell styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/snapX.html">Horizontal snap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/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-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,664 @@
|
||||
<!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>RowReorder example - Bootstrap styling</title>
|
||||
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/rowReorder.bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.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="../../js/dataTables.rowReorder.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
rowReorder: true
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-bootstrap">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>RowReorder example <span>Bootstrap styling</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows DataTables and the RowReorder extension being used with the <a href="http://getbootstrap.com">Bootstrap</a> framework providing the styling.
|
||||
The <a href="//datatables.net/manual/styling/bootstrap">DataTables / Bootstrap integration</a> provides seamless integration for DataTables to be used in a
|
||||
Bootstrap page.</p>
|
||||
</div>
|
||||
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>22</td>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>41</td>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>55</td>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>21</td>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>46</td>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>50</td>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>26</td>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18</td>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>13</td>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>23</td>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14</td>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12</td>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>54</td>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>37</td>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>32</td>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>35</td>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>48</td>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>45</td>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>17</td>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>57</td>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>29</td>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>56</td>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>36</td>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>51</td>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20</td>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>39</td>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>40</td>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>47</td>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>52</td>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24</td>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>38</td>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>53</td>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>30</td>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>28</td>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>34</td>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>31</td>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>44</td>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>42</td>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>27</td>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>49</td>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15</td>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>25</td>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>33</td>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>43</td>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>16</td>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19</td>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</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( {
|
||||
rowReorder: true
|
||||
} );
|
||||
} );</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.12.3.min.js">//code.jquery.com/jquery-1.12.3.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>
|
||||
<li>
|
||||
<a href="../../js/dataTables.rowReorder.js">../../js/dataTables.rowReorder.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.6/css/bootstrap.min.css">//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/css/dataTables.bootstrap.css">../../../../media/css/dataTables.bootstrap.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/rowReorder.bootstrap.css">../../css/rowReorder.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="../initialisation/index.html">Initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/restrictedOrdering.html">Restricted column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/responsive.html">Mobile support (Responsive integration)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/selector.html">Full row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/events.html">Reorder event</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/scroll.html">DataTables Scrolling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/defaults.html">Defaults</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./reorderClass.html">Selector cell styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./snapX.html">Horizontal snap</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui.html">Semantic UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/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-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,664 @@
|
||||
<!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>RowReorder example - Bootstrap 4 styling</title>
|
||||
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.bootstrap4.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/rowReorder.bootstrap4.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.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.bootstrap4.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.rowReorder.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
rowReorder: true
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-bootstrap4">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>RowReorder example <span>Bootstrap 4 styling</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows DataTables and the RowReorder extension being used with <a href="http://getbootstrap.com">Bootstrap 4</a> providing the styling. The
|
||||
DataTables / Bootstrap integration provides seamless integration for DataTables to be used in a Bootstrap 4 page.</p>
|
||||
</div>
|
||||
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>22</td>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>41</td>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>55</td>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>21</td>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>46</td>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>50</td>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>26</td>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18</td>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>13</td>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>23</td>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14</td>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12</td>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>54</td>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>37</td>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>32</td>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>35</td>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>48</td>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>45</td>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>17</td>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>57</td>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>29</td>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>56</td>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>36</td>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>51</td>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20</td>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>39</td>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>40</td>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>47</td>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>52</td>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24</td>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>38</td>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>53</td>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>30</td>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>28</td>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>34</td>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>31</td>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>44</td>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>42</td>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>27</td>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>49</td>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15</td>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>25</td>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>33</td>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>43</td>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>16</td>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19</td>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</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( {
|
||||
rowReorder: true
|
||||
} );
|
||||
} );</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.12.3.min.js">//code.jquery.com/jquery-1.12.3.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.bootstrap4.js">../../../../media/js/dataTables.bootstrap4.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.rowReorder.js">../../js/dataTables.rowReorder.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=
|
||||
"//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css">//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/css/dataTables.bootstrap4.css">../../../../media/css/dataTables.bootstrap4.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/rowReorder.bootstrap4.css">../../css/rowReorder.bootstrap4.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="../initialisation/index.html">Initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/restrictedOrdering.html">Restricted column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/responsive.html">Mobile support (Responsive integration)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/selector.html">Full row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/events.html">Reorder event</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/scroll.html">DataTables Scrolling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/defaults.html">Defaults</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./reorderClass.html">Selector cell styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./snapX.html">Horizontal snap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui.html">Semantic UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/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-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,665 @@
|
||||
<!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>RowReorder example - Foundation styling</title>
|
||||
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.foundation.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/rowReorder.foundation.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.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.foundation.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.rowReorder.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
rowReorder: true
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-foundation">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>RowReorder example <span>Foundation styling</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows DataTables and the RowReorder extension being used with the <a href="http://foundation.zurb.com">Foundation</a> framework providing the
|
||||
styling. The <a href="//datatables.net/manual/styling/foundation">DataTables / Foundation integration</a> prove seamless integration for DataTables to be used in a
|
||||
Foundation page.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>22</td>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>41</td>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>55</td>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>21</td>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>46</td>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>50</td>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>26</td>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18</td>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>13</td>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>23</td>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14</td>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12</td>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>54</td>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>37</td>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>32</td>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>35</td>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>48</td>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>45</td>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>17</td>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>57</td>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>29</td>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>56</td>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>36</td>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>51</td>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20</td>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>39</td>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>40</td>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>47</td>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>52</td>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24</td>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>38</td>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>53</td>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>30</td>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>28</td>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>34</td>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>31</td>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>44</td>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>42</td>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>27</td>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>49</td>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15</td>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>25</td>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>33</td>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>43</td>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>16</td>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19</td>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</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( {
|
||||
rowReorder: true
|
||||
} );
|
||||
} );</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.12.3.min.js">//code.jquery.com/jquery-1.12.3.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.foundation.js">../../../../media/js/dataTables.foundation.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.rowReorder.js">../../js/dataTables.rowReorder.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=
|
||||
"//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/css/dataTables.foundation.css">../../../../media/css/dataTables.foundation.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/rowReorder.foundation.css">../../css/rowReorder.foundation.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="../initialisation/index.html">Initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/restrictedOrdering.html">Restricted column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/responsive.html">Mobile support (Responsive integration)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/selector.html">Full row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/events.html">Reorder event</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/scroll.html">DataTables Scrolling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/defaults.html">Defaults</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./reorderClass.html">Selector cell styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./snapX.html">Horizontal snap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui.html">Semantic UI styling</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/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-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,69 @@
|
||||
<!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">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<title>RowReorder examples - Styling</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>RowReorder example <span>Styling</span></h1>
|
||||
<div class="info">
|
||||
<p>RowReorder requires very little styling information of its own, with styling needed only for the moving and target elements. As such, integrating RowReorder
|
||||
with your application should be as simple as including the Javascript and base stylesheet! This section shows RowReorder being styling using external CSS
|
||||
frameworks and other styling options.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./reorderClass.html">Selector cell styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./snapX.html">Horizontal snap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui.html">Semantic UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/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-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,662 @@
|
||||
<!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>RowReorder example - jQuery UI styling</title>
|
||||
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.jqueryui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/rowReorder.jqueryui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.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.jqueryui.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.rowReorder.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
rowReorder: true
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-jqueryui">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>RowReorder example <span>jQuery UI styling</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows DataTables and RowReorder being used with <a href="http://jqueryui.com/">jQuery UI</a> providing the base styling information.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>22</td>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>41</td>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>55</td>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>21</td>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>46</td>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>50</td>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>26</td>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18</td>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>13</td>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>23</td>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14</td>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12</td>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>54</td>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>37</td>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>32</td>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>35</td>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>48</td>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>45</td>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>17</td>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>57</td>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>29</td>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>56</td>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>36</td>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>51</td>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20</td>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>39</td>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>40</td>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>47</td>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>52</td>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24</td>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>38</td>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>53</td>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>30</td>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>28</td>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>34</td>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>31</td>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>44</td>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>42</td>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>27</td>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>49</td>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15</td>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>25</td>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>33</td>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>43</td>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>16</td>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19</td>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</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( {
|
||||
rowReorder: true
|
||||
} );
|
||||
} );</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.12.3.min.js">//code.jquery.com/jquery-1.12.3.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.jqueryui.js">../../../../media/js/dataTables.jqueryui.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.rowReorder.js">../../js/dataTables.rowReorder.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="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/css/dataTables.jqueryui.css">../../../../media/css/dataTables.jqueryui.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/rowReorder.jqueryui.css">../../css/rowReorder.jqueryui.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="../initialisation/index.html">Initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/restrictedOrdering.html">Restricted column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/responsive.html">Mobile support (Responsive integration)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/selector.html">Full row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/events.html">Reorder event</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/scroll.html">DataTables Scrolling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/defaults.html">Defaults</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./reorderClass.html">Selector cell styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./snapX.html">Horizontal snap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui.html">Semantic UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/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-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,665 @@
|
||||
<!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>RowReorder example - Selector cell styling</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/rowReorder.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.rowReorder.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
var table = $('#example').DataTable( {
|
||||
rowReorder: true,
|
||||
columnDefs: [
|
||||
{ orderable: true, className: 'reorder', targets: 0 },
|
||||
{ orderable: false, targets: '_all' }
|
||||
]
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>RowReorder example <span>Selector cell styling</span></h1>
|
||||
<div class="info">
|
||||
<p>The RowReorder stylesheets provide a <code class="string" title="String">reorder</code> class that can be applied to the column that will start row reordering
|
||||
(done with the <a href="//datatables.net/reference/option/columns.className"><code class="option" title=
|
||||
"DataTables initialisation option">columns.className</code></a> option), giving a visual indicator to the end user that this is the drag handle (a move
|
||||
cursor).</p>
|
||||
<p>This example shows that in action on the first column in the table.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>22</td>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>41</td>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>55</td>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>21</td>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>46</td>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>50</td>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>26</td>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18</td>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>13</td>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>23</td>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14</td>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12</td>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>54</td>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>37</td>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>32</td>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>35</td>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>48</td>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>45</td>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>17</td>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>57</td>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>29</td>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>56</td>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>36</td>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>51</td>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20</td>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>39</td>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>40</td>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>47</td>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>52</td>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24</td>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>38</td>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>53</td>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>30</td>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>28</td>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>34</td>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>31</td>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>44</td>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>42</td>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>27</td>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>49</td>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15</td>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>25</td>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>33</td>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>43</td>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>16</td>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19</td>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</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() {
|
||||
var table = $('#example').DataTable( {
|
||||
rowReorder: true,
|
||||
columnDefs: [
|
||||
{ orderable: true, className: 'reorder', targets: 0 },
|
||||
{ orderable: false, targets: '_all' }
|
||||
]
|
||||
} );
|
||||
} );</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.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.rowReorder.js">../../js/dataTables.rowReorder.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/rowReorder.dataTables.css">../../css/rowReorder.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="../initialisation/index.html">Initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/restrictedOrdering.html">Restricted column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/responsive.html">Mobile support (Responsive integration)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/selector.html">Full row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/events.html">Reorder event</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/scroll.html">DataTables Scrolling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/defaults.html">Defaults</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc active">
|
||||
<li class="active">
|
||||
<a href="./reorderClass.html">Selector cell styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./snapX.html">Horizontal snap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui.html">Semantic UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/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-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,663 @@
|
||||
<!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>RowReorder example - Semantic UI styling</title>
|
||||
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.semanticui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/rowReorder.semanticui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.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.semanticui.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.rowReorder.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
rowReorder: true
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-semanticui">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>RowReorder example <span>Semantic UI styling</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows DataTables and the RowReorder extension being used with <a href="http://semantic-ui.com">Semantic UI</a> providing the styling. The
|
||||
DataTables / Semantic UI integration provides seamless integration for DataTables to be used in a Semantic UI page.</p>
|
||||
</div>
|
||||
<table id="example" class="ui celled table" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>22</td>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>41</td>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>55</td>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>21</td>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>46</td>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>50</td>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>26</td>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18</td>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>13</td>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>23</td>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14</td>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12</td>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>54</td>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>37</td>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>32</td>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>35</td>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>48</td>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>45</td>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>17</td>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>57</td>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>29</td>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>56</td>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>36</td>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>51</td>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20</td>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>39</td>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>40</td>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>47</td>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>52</td>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24</td>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>38</td>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>53</td>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>30</td>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>28</td>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>34</td>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>31</td>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>44</td>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>42</td>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>27</td>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>49</td>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15</td>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>25</td>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>33</td>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>43</td>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>16</td>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19</td>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</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( {
|
||||
rowReorder: true
|
||||
} );
|
||||
} );</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.12.3.min.js">//code.jquery.com/jquery-1.12.3.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.semanticui.js">../../../../media/js/dataTables.semanticui.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.rowReorder.js">../../js/dataTables.rowReorder.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="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/css/dataTables.semanticui.css">../../../../media/css/dataTables.semanticui.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/rowReorder.semanticui.css">../../css/rowReorder.semanticui.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="../initialisation/index.html">Initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/restrictedOrdering.html">Restricted column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/responsive.html">Mobile support (Responsive integration)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/selector.html">Full row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/events.html">Reorder event</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/scroll.html">DataTables Scrolling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/defaults.html">Defaults</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./reorderClass.html">Selector cell styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./snapX.html">Horizontal snap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./semanticui.html">Semantic UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/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-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,660 @@
|
||||
<!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>RowReorder example - Horizontal snap</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/rowReorder.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.rowReorder.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
var table = $('#example').DataTable( {
|
||||
rowReorder: {
|
||||
snapX: 10
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>RowReorder example <span>Horizontal snap</span></h1>
|
||||
<div class="info">
|
||||
<p>By default, when a row is dragged around a page with RowReorder, it will follow the mouse for both horizontal and vertical movements. However, you may wish to
|
||||
restrict the movement of the following row to just the vertical axis. This can be done with the <a href=
|
||||
"//datatables.net/reference/option/rowReorder.snapX"><code class="option" title="RowReorder initialisation option">rowReorder.snapX</code></a> option.</p>
|
||||
<p>This option can be used to fix the row to the table's left, or can be used to offset the row as is done in this example.</p>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Seq.</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>22</td>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>41</td>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>55</td>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>21</td>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>46</td>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>50</td>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>26</td>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18</td>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>13</td>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>23</td>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14</td>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12</td>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>54</td>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>37</td>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>32</td>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>35</td>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>48</td>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>45</td>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>17</td>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>57</td>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>29</td>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>56</td>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>36</td>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>51</td>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20</td>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>39</td>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>40</td>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>47</td>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>52</td>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24</td>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>38</td>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>53</td>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>30</td>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>28</td>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>34</td>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>31</td>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>44</td>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>42</td>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>27</td>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>49</td>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15</td>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>25</td>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>33</td>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>43</td>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>16</td>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19</td>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</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() {
|
||||
var table = $('#example').DataTable( {
|
||||
rowReorder: {
|
||||
snapX: 10
|
||||
}
|
||||
} );
|
||||
} );</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.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.rowReorder.js">../../js/dataTables.rowReorder.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/rowReorder.dataTables.css">../../css/rowReorder.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="../initialisation/index.html">Initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/restrictedOrdering.html">Restricted column ordering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/responsive.html">Mobile support (Responsive integration)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/selector.html">Full row selection</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/events.html">Reorder event</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/scroll.html">DataTables Scrolling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/defaults.html">Defaults</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./reorderClass.html">Selector cell styling</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./snapX.html">Horizontal snap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui.html">Semantic UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/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-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,709 @@
|
||||
/*! RowReorder 1.1.2
|
||||
* 2015-2016 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
/**
|
||||
* @summary RowReorder
|
||||
* @description Row reordering extension for DataTables
|
||||
* @version 1.1.2
|
||||
* @file dataTables.rowReorder.js
|
||||
* @author SpryMedia Ltd (www.sprymedia.co.uk)
|
||||
* @contact www.sprymedia.co.uk/contact
|
||||
* @copyright Copyright 2015-2016 SpryMedia Ltd.
|
||||
*
|
||||
* This source file is free software, available under the following license:
|
||||
* MIT license - http://datatables.net/license/mit
|
||||
*
|
||||
* This source file is distributed in the hope that it will be useful, but
|
||||
* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
|
||||
* or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
|
||||
*
|
||||
* For details please refer to: http://www.datatables.net
|
||||
*/
|
||||
|
||||
(function( factory ){
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( ['jquery', 'datatables.net'], function ( $ ) {
|
||||
return factory( $, window, document );
|
||||
} );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// CommonJS
|
||||
module.exports = function (root, $) {
|
||||
if ( ! root ) {
|
||||
root = window;
|
||||
}
|
||||
|
||||
if ( ! $ || ! $.fn.dataTable ) {
|
||||
$ = require('datatables.net')(root, $).$;
|
||||
}
|
||||
|
||||
return factory( $, root, root.document );
|
||||
};
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory( jQuery, window, document );
|
||||
}
|
||||
}(function( $, window, document, undefined ) {
|
||||
'use strict';
|
||||
var DataTable = $.fn.dataTable;
|
||||
|
||||
|
||||
/**
|
||||
* RowReorder provides the ability in DataTables to click and drag rows to
|
||||
* reorder them. When a row is dropped the data for the rows effected will be
|
||||
* updated to reflect the change. Normally this data point should also be the
|
||||
* column being sorted upon in the DataTable but this does not need to be the
|
||||
* case. RowReorder implements a "data swap" method - so the rows being
|
||||
* reordered take the value of the data point from the row that used to occupy
|
||||
* the row's new position.
|
||||
*
|
||||
* Initialisation is done by either:
|
||||
*
|
||||
* * `rowReorder` parameter in the DataTable initialisation object
|
||||
* * `new $.fn.dataTable.RowReorder( table, opts )` after DataTables
|
||||
* initialisation.
|
||||
*
|
||||
* @class
|
||||
* @param {object} settings DataTables settings object for the host table
|
||||
* @param {object} [opts] Configuration options
|
||||
* @requires jQuery 1.7+
|
||||
* @requires DataTables 1.10.7+
|
||||
*/
|
||||
var RowReorder = function ( dt, opts ) {
|
||||
// Sanity check that we are using DataTables 1.10 or newer
|
||||
if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.8' ) ) {
|
||||
throw 'DataTables RowReorder requires DataTables 1.10.8 or newer';
|
||||
}
|
||||
|
||||
// User and defaults configuration object
|
||||
this.c = $.extend( true, {},
|
||||
DataTable.defaults.rowReorder,
|
||||
RowReorder.defaults,
|
||||
opts
|
||||
);
|
||||
|
||||
// Internal settings
|
||||
this.s = {
|
||||
/** @type {integer} Scroll body top cache */
|
||||
bodyTop: null,
|
||||
|
||||
/** @type {DataTable.Api} DataTables' API instance */
|
||||
dt: new DataTable.Api( dt ),
|
||||
|
||||
/** @type {function} Data fetch function */
|
||||
getDataFn: DataTable.ext.oApi._fnGetObjectDataFn( this.c.dataSrc ),
|
||||
|
||||
/** @type {array} Pixel positions for row insertion calculation */
|
||||
middles: null,
|
||||
|
||||
/** @type {Object} Cached dimension information for use in the mouse move event handler */
|
||||
scroll: {},
|
||||
|
||||
/** @type {integer} Interval object used for smooth scrolling */
|
||||
scrollInterval: null,
|
||||
|
||||
/** @type {function} Data set function */
|
||||
setDataFn: DataTable.ext.oApi._fnSetObjectDataFn( this.c.dataSrc ),
|
||||
|
||||
/** @type {Object} Mouse down information */
|
||||
start: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
offsetTop: 0,
|
||||
offsetLeft: 0,
|
||||
nodes: []
|
||||
},
|
||||
|
||||
/** @type {integer} Window height cached value */
|
||||
windowHeight: 0
|
||||
};
|
||||
|
||||
// DOM items
|
||||
this.dom = {
|
||||
/** @type {jQuery} Cloned row being moved around */
|
||||
clone: null,
|
||||
|
||||
/** @type {jQuery} DataTables scrolling container */
|
||||
dtScroll: $('div.dataTables_scrollBody', this.s.dt.table().container())
|
||||
};
|
||||
|
||||
// Check if row reorder has already been initialised on this table
|
||||
var settings = this.s.dt.settings()[0];
|
||||
var exisiting = settings.rowreorder;
|
||||
if ( exisiting ) {
|
||||
return exisiting;
|
||||
}
|
||||
|
||||
settings.rowreorder = this;
|
||||
this._constructor();
|
||||
};
|
||||
|
||||
|
||||
$.extend( RowReorder.prototype, {
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* Constructor
|
||||
*/
|
||||
|
||||
/**
|
||||
* Initialise the RowReorder instance
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_constructor: function ()
|
||||
{
|
||||
var that = this;
|
||||
var dt = this.s.dt;
|
||||
var table = $( dt.table().node() );
|
||||
|
||||
// Need to be able to calculate the row positions relative to the table
|
||||
if ( table.css('position') === 'static' ) {
|
||||
table.css( 'position', 'relative' );
|
||||
}
|
||||
|
||||
// listen for mouse down on the target column - we have to implement
|
||||
// this rather than using HTML5 drag and drop as drag and drop doesn't
|
||||
// appear to work on table rows at this time. Also mobile browsers are
|
||||
// not supported.
|
||||
// Use `table().container()` rather than just the table node for IE8 -
|
||||
// otherwise it only works once...
|
||||
$(dt.table().container()).on( 'mousedown.rowReorder touchstart.rowReorder', this.c.selector, function (e) {
|
||||
var tr = $(this).closest('tr');
|
||||
|
||||
// Double check that it is a DataTable row
|
||||
if ( dt.row( tr ).any() ) {
|
||||
that._mouseDown( e, tr );
|
||||
return false;
|
||||
}
|
||||
} );
|
||||
|
||||
dt.on( 'destroy.rowReorder', function () {
|
||||
$(dt.table().container()).off( '.rowReorder' );
|
||||
dt.off( '.rowReorder' );
|
||||
} );
|
||||
},
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* Private methods
|
||||
*/
|
||||
|
||||
/**
|
||||
* Cache the measurements that RowReorder needs in the mouse move handler
|
||||
* to attempt to speed things up, rather than reading from the DOM.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_cachePositions: function ()
|
||||
{
|
||||
var dt = this.s.dt;
|
||||
|
||||
// Frustratingly, if we add `position:relative` to the tbody, the
|
||||
// position is still relatively to the parent. So we need to adjust
|
||||
// for that
|
||||
var headerHeight = $( dt.table().node() ).find('thead').outerHeight();
|
||||
|
||||
// Need to pass the nodes through jQuery to get them in document order,
|
||||
// not what DataTables thinks it is, since we have been altering the
|
||||
// order
|
||||
var nodes = $.unique( dt.rows( { page: 'current' } ).nodes().toArray() );
|
||||
var tops = $.map( nodes, function ( node, i ) {
|
||||
return $(node).position().top - headerHeight;
|
||||
} );
|
||||
|
||||
var middles = $.map( tops, function ( top, i ) {
|
||||
return tops.length < i-1 ?
|
||||
(top + tops[i+1]) / 2 :
|
||||
(top + top + $( dt.row( ':last-child' ).node() ).outerHeight() ) / 2;
|
||||
} );
|
||||
|
||||
this.s.middles = middles;
|
||||
this.s.bodyTop = $( dt.table().body() ).offset().top;
|
||||
this.s.windowHeight = $(window).height();
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Clone a row so it can be floated around the screen
|
||||
*
|
||||
* @param {jQuery} target Node to be cloned
|
||||
* @private
|
||||
*/
|
||||
_clone: function ( target )
|
||||
{
|
||||
var dt = this.s.dt;
|
||||
var clone = $( dt.table().node().cloneNode(false) )
|
||||
.addClass( 'dt-rowReorder-float' )
|
||||
.append('<tbody/>')
|
||||
.append( target.clone( false ) );
|
||||
|
||||
// Match the table and column widths - read all sizes before setting
|
||||
// to reduce reflows
|
||||
var tableWidth = target.outerWidth();
|
||||
var tableHeight = target.outerHeight();
|
||||
var sizes = target.children().map( function () {
|
||||
return $(this).width();
|
||||
} );
|
||||
|
||||
clone
|
||||
.width( tableWidth )
|
||||
.height( tableHeight )
|
||||
.find('tr').children().each( function (i) {
|
||||
this.style.width = sizes[i]+'px';
|
||||
} );
|
||||
|
||||
// Insert into the document to have it floating around
|
||||
clone.appendTo( 'body' );
|
||||
|
||||
this.dom.clone = clone;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Update the cloned item's position in the document
|
||||
*
|
||||
* @param {object} e Event giving the mouse's position
|
||||
* @private
|
||||
*/
|
||||
_clonePosition: function ( e )
|
||||
{
|
||||
var start = this.s.start;
|
||||
var topDiff = this._eventToPage( e, 'Y' ) - start.top;
|
||||
var leftDiff = this._eventToPage( e, 'X' ) - start.left;
|
||||
var snap = this.c.snapX;
|
||||
var left;
|
||||
|
||||
if ( snap === true ) {
|
||||
left = start.offsetLeft;
|
||||
}
|
||||
else if ( typeof snap === 'number' ) {
|
||||
left = start.offsetLeft + snap;
|
||||
}
|
||||
else {
|
||||
left = leftDiff + start.offsetLeft;
|
||||
}
|
||||
|
||||
this.dom.clone.css( {
|
||||
top: topDiff + start.offsetTop,
|
||||
left: left
|
||||
} );
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Emit an event on the DataTable for listeners
|
||||
*
|
||||
* @param {string} name Event name
|
||||
* @param {array} args Event arguments
|
||||
* @private
|
||||
*/
|
||||
_emitEvent: function ( name, args )
|
||||
{
|
||||
this.s.dt.iterator( 'table', function ( ctx, i ) {
|
||||
$(ctx.nTable).triggerHandler( name+'.dt', args );
|
||||
} );
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Get pageX/Y position from an event, regardless of if it is a mouse or
|
||||
* touch event.
|
||||
*
|
||||
* @param {object} e Event
|
||||
* @param {string} pos X or Y (must be a capital)
|
||||
* @private
|
||||
*/
|
||||
_eventToPage: function ( e, pos )
|
||||
{
|
||||
if ( e.type.indexOf( 'touch' ) !== -1 ) {
|
||||
return e.originalEvent.touches[0][ 'page'+pos ];
|
||||
}
|
||||
|
||||
return e[ 'page'+pos ];
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Mouse down event handler. Read initial positions and add event handlers
|
||||
* for the move.
|
||||
*
|
||||
* @param {object} e Mouse event
|
||||
* @param {jQuery} target TR element that is to be moved
|
||||
* @private
|
||||
*/
|
||||
_mouseDown: function ( e, target )
|
||||
{
|
||||
var that = this;
|
||||
var dt = this.s.dt;
|
||||
var start = this.s.start;
|
||||
|
||||
var offset = target.offset();
|
||||
start.top = this._eventToPage( e, 'Y' );
|
||||
start.left = this._eventToPage( e, 'X' );
|
||||
start.offsetTop = offset.top;
|
||||
start.offsetLeft = offset.left;
|
||||
start.nodes = $.unique( dt.rows( { page: 'current' } ).nodes().toArray() );
|
||||
|
||||
this._cachePositions();
|
||||
this._clone( target );
|
||||
this._clonePosition( e );
|
||||
|
||||
this.dom.target = target;
|
||||
target.addClass( 'dt-rowReorder-moving' );
|
||||
|
||||
$( document )
|
||||
.on( 'mouseup.rowReorder touchend.rowReorder', function (e) {
|
||||
that._mouseUp(e);
|
||||
} )
|
||||
.on( 'mousemove.rowReorder touchmove.rowReorder', function (e) {
|
||||
that._mouseMove(e);
|
||||
} );
|
||||
|
||||
// Check if window is x-scrolling - if not, disable it for the duration
|
||||
// of the drag
|
||||
if ( $(window).width() === $(document).width() ) {
|
||||
$(document.body).addClass( 'dt-rowReorder-noOverflow' );
|
||||
}
|
||||
|
||||
// Cache scrolling information so mouse move doesn't need to read.
|
||||
// This assumes that the window and DT scroller will not change size
|
||||
// during an row drag, which I think is a fair assumption
|
||||
var scrollWrapper = this.dom.dtScroll;
|
||||
this.s.scroll = {
|
||||
windowHeight: $(window).height(),
|
||||
windowWidth: $(window).width(),
|
||||
dtTop: scrollWrapper.length ? scrollWrapper.offset().top : null,
|
||||
dtLeft: scrollWrapper.length ? scrollWrapper.offset().left : null,
|
||||
dtHeight: scrollWrapper.length ? scrollWrapper.outerHeight() : null,
|
||||
dtWidth: scrollWrapper.length ? scrollWrapper.outerWidth() : null
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Mouse move event handler - move the cloned row and shuffle the table's
|
||||
* rows if required.
|
||||
*
|
||||
* @param {object} e Mouse event
|
||||
* @private
|
||||
*/
|
||||
_mouseMove: function ( e )
|
||||
{
|
||||
this._clonePosition( e );
|
||||
|
||||
// Transform the mouse position into a position in the table's body
|
||||
var bodyY = this._eventToPage( e, 'Y' ) - this.s.bodyTop;
|
||||
var middles = this.s.middles;
|
||||
var insertPoint = null;
|
||||
var dt = this.s.dt;
|
||||
var body = dt.table().body();
|
||||
|
||||
// Determine where the row should be inserted based on the mouse
|
||||
// position
|
||||
for ( var i=0, ien=middles.length ; i<ien ; i++ ) {
|
||||
if ( bodyY < middles[i] ) {
|
||||
insertPoint = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if ( insertPoint === null ) {
|
||||
insertPoint = middles.length;
|
||||
}
|
||||
|
||||
// Perform the DOM shuffle if it has changed from last time
|
||||
if ( this.s.lastInsert === null || this.s.lastInsert !== insertPoint ) {
|
||||
if ( insertPoint === 0 ) {
|
||||
this.dom.target.prependTo( body );
|
||||
}
|
||||
else {
|
||||
var nodes = $.unique( dt.rows( { page: 'current' } ).nodes().toArray() );
|
||||
|
||||
if ( insertPoint > this.s.lastInsert ) {
|
||||
this.dom.target.insertAfter( nodes[ insertPoint-1 ] );
|
||||
}
|
||||
else {
|
||||
this.dom.target.insertBefore( nodes[ insertPoint ] );
|
||||
}
|
||||
}
|
||||
|
||||
this._cachePositions();
|
||||
|
||||
this.s.lastInsert = insertPoint;
|
||||
}
|
||||
|
||||
this._shiftScroll( e );
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Mouse up event handler - release the event handlers and perform the
|
||||
* table updates
|
||||
*
|
||||
* @param {object} e Mouse event
|
||||
* @private
|
||||
*/
|
||||
_mouseUp: function ( e )
|
||||
{
|
||||
var dt = this.s.dt;
|
||||
var i, ien;
|
||||
var dataSrc = this.c.dataSrc;
|
||||
|
||||
this.dom.clone.remove();
|
||||
this.dom.clone = null;
|
||||
|
||||
this.dom.target.removeClass( 'dt-rowReorder-moving' );
|
||||
//this.dom.target = null;
|
||||
|
||||
$(document).off( '.rowReorder' );
|
||||
$(document.body).removeClass( 'dt-rowReorder-noOverflow' );
|
||||
|
||||
clearInterval( this.s.scrollInterval );
|
||||
this.s.scrollInterval = null;
|
||||
|
||||
// Calculate the difference
|
||||
var startNodes = this.s.start.nodes;
|
||||
var endNodes = $.unique( dt.rows( { page: 'current' } ).nodes().toArray() );
|
||||
var idDiff = {};
|
||||
var fullDiff = [];
|
||||
var diffNodes = [];
|
||||
var getDataFn = this.s.getDataFn;
|
||||
var setDataFn = this.s.setDataFn;
|
||||
|
||||
for ( i=0, ien=startNodes.length ; i<ien ; i++ ) {
|
||||
if ( startNodes[i] !== endNodes[i] ) {
|
||||
var id = dt.row( endNodes[i] ).id();
|
||||
var endRowData = dt.row( endNodes[i] ).data();
|
||||
var startRowData = dt.row( startNodes[i] ).data();
|
||||
|
||||
if ( id ) {
|
||||
idDiff[ id ] = getDataFn( startRowData );
|
||||
}
|
||||
|
||||
fullDiff.push( {
|
||||
node: endNodes[i],
|
||||
oldData: getDataFn( endRowData ),
|
||||
newData: getDataFn( startRowData ),
|
||||
newPosition: i,
|
||||
oldPosition: $.inArray( endNodes[i], startNodes )
|
||||
} );
|
||||
|
||||
diffNodes.push( endNodes[i] );
|
||||
}
|
||||
}
|
||||
|
||||
// Create event args
|
||||
var eventArgs = [ fullDiff, {
|
||||
dataSrc: dataSrc,
|
||||
nodes: diffNodes,
|
||||
values: idDiff,
|
||||
triggerRow: dt.row( this.dom.target )
|
||||
} ];
|
||||
|
||||
// Emit event
|
||||
this._emitEvent( 'row-reorder', eventArgs );
|
||||
|
||||
// Editor interface
|
||||
if ( this.c.editor ) {
|
||||
this.c.editor
|
||||
.edit( diffNodes, false, {
|
||||
submit: 'changed'
|
||||
} )
|
||||
.multiSet( dataSrc, idDiff )
|
||||
.submit();
|
||||
}
|
||||
|
||||
// Do update if required
|
||||
if ( this.c.update ) {
|
||||
for ( i=0, ien=fullDiff.length ; i<ien ; i++ ) {
|
||||
var row = dt.row( fullDiff[i].node );
|
||||
var rowData = row.data();
|
||||
|
||||
setDataFn( rowData, fullDiff[i].newData );
|
||||
|
||||
// Invalidate the cell that has the same data source as the dataSrc
|
||||
dt.columns().every( function () {
|
||||
if ( this.dataSrc() === dataSrc ) {
|
||||
dt.cell( fullDiff[i].node, this.index() ).invalidate( 'data' );
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
// Trigger row reordered event
|
||||
this._emitEvent( 'row-reordered', eventArgs );
|
||||
|
||||
dt.draw( false );
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Move the window and DataTables scrolling during a drag to scroll new
|
||||
* content into view.
|
||||
*
|
||||
* This matches the `_shiftScroll` method used in AutoFill, but only
|
||||
* horizontal scrolling is considered here.
|
||||
*
|
||||
* @param {object} e Mouse move event object
|
||||
* @private
|
||||
*/
|
||||
_shiftScroll: function ( e )
|
||||
{
|
||||
var that = this;
|
||||
var dt = this.s.dt;
|
||||
var scroll = this.s.scroll;
|
||||
var runInterval = false;
|
||||
var scrollSpeed = 5;
|
||||
var buffer = 65;
|
||||
var
|
||||
windowY = e.pageY - document.body.scrollTop,
|
||||
windowVert,
|
||||
dtVert;
|
||||
|
||||
// Window calculations - based on the mouse position in the window,
|
||||
// regardless of scrolling
|
||||
if ( windowY < buffer ) {
|
||||
windowVert = scrollSpeed * -1;
|
||||
}
|
||||
else if ( windowY > scroll.windowHeight - buffer ) {
|
||||
windowVert = scrollSpeed;
|
||||
}
|
||||
|
||||
// DataTables scrolling calculations - based on the table's position in
|
||||
// the document and the mouse position on the page
|
||||
if ( scroll.dtTop !== null && e.pageY < scroll.dtTop + buffer ) {
|
||||
dtVert = scrollSpeed * -1;
|
||||
}
|
||||
else if ( scroll.dtTop !== null && e.pageY > scroll.dtTop + scroll.dtHeight - buffer ) {
|
||||
dtVert = scrollSpeed;
|
||||
}
|
||||
|
||||
// This is where it gets interesting. We want to continue scrolling
|
||||
// without requiring a mouse move, so we need an interval to be
|
||||
// triggered. The interval should continue until it is no longer needed,
|
||||
// but it must also use the latest scroll commands (for example consider
|
||||
// that the mouse might move from scrolling up to scrolling left, all
|
||||
// with the same interval running. We use the `scroll` object to "pass"
|
||||
// this information to the interval. Can't use local variables as they
|
||||
// wouldn't be the ones that are used by an already existing interval!
|
||||
if ( windowVert || dtVert ) {
|
||||
scroll.windowVert = windowVert;
|
||||
scroll.dtVert = dtVert;
|
||||
runInterval = true;
|
||||
}
|
||||
else if ( this.s.scrollInterval ) {
|
||||
// Don't need to scroll - remove any existing timer
|
||||
clearInterval( this.s.scrollInterval );
|
||||
this.s.scrollInterval = null;
|
||||
}
|
||||
|
||||
// If we need to run the interval to scroll and there is no existing
|
||||
// interval (if there is an existing one, it will continue to run)
|
||||
if ( ! this.s.scrollInterval && runInterval ) {
|
||||
this.s.scrollInterval = setInterval( function () {
|
||||
// Don't need to worry about setting scroll <0 or beyond the
|
||||
// scroll bound as the browser will just reject that.
|
||||
if ( scroll.windowVert ) {
|
||||
document.body.scrollTop += scroll.windowVert;
|
||||
}
|
||||
|
||||
// DataTables scrolling
|
||||
if ( scroll.dtVert ) {
|
||||
var scroller = that.dom.dtScroll[0];
|
||||
|
||||
if ( scroll.dtVert ) {
|
||||
scroller.scrollTop += scroll.dtVert;
|
||||
}
|
||||
}
|
||||
}, 20 );
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* RowReorder default settings for initialisation
|
||||
*
|
||||
* @namespace
|
||||
* @name RowReorder.defaults
|
||||
* @static
|
||||
*/
|
||||
RowReorder.defaults = {
|
||||
/**
|
||||
* Data point in the host row's data source object for where to get and set
|
||||
* the data to reorder. This will normally also be the sorting column.
|
||||
*
|
||||
* @type {Number}
|
||||
*/
|
||||
dataSrc: 0,
|
||||
|
||||
/**
|
||||
* Editor instance that will be used to perform the update
|
||||
*
|
||||
* @type {DataTable.Editor}
|
||||
*/
|
||||
editor: null,
|
||||
|
||||
/**
|
||||
* Drag handle selector. This defines the element that when dragged will
|
||||
* reorder a row.
|
||||
*
|
||||
* @type {String}
|
||||
*/
|
||||
selector: 'td:first-child',
|
||||
|
||||
/**
|
||||
* Optionally lock the dragged row's x-position. This can be `true` to
|
||||
* fix the position match the host table's, `false` to allow free movement
|
||||
* of the row, or a number to define an offset from the host table.
|
||||
*
|
||||
* @type {Boolean|number}
|
||||
*/
|
||||
snapX: false,
|
||||
|
||||
/**
|
||||
* Update the table's data on drop
|
||||
*
|
||||
* @type {Boolean}
|
||||
*/
|
||||
update: true
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Version information
|
||||
*
|
||||
* @name RowReorder.version
|
||||
* @static
|
||||
*/
|
||||
RowReorder.version = '1.1.2';
|
||||
|
||||
|
||||
$.fn.dataTable.RowReorder = RowReorder;
|
||||
$.fn.DataTable.RowReorder = RowReorder;
|
||||
|
||||
// Attach a listener to the document which listens for DataTables initialisation
|
||||
// events so we can automatically initialise
|
||||
$(document).on( 'init.dt.dtr', function (e, settings, json) {
|
||||
if ( e.namespace !== 'dt' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var init = settings.oInit.rowReorder;
|
||||
var defaults = DataTable.defaults.rowReorder;
|
||||
|
||||
if ( init || defaults ) {
|
||||
var opts = $.extend( {}, init, defaults );
|
||||
|
||||
if ( init !== false ) {
|
||||
new RowReorder( settings, opts );
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
return RowReorder;
|
||||
}));
|
||||
16
assets/plugin/datatables/extensions/RowReorder/js/dataTables.rowReorder.min.js
vendored
Normal file
16
assets/plugin/datatables/extensions/RowReorder/js/dataTables.rowReorder.min.js
vendored
Normal file
@ -0,0 +1,16 @@
|
||||
/*!
|
||||
RowReorder 1.1.2
|
||||
2015-2016 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
(function(e){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(f){return e(f,window,document)}):"object"===typeof exports?module.exports=function(f,g){f||(f=window);if(!g||!g.fn.dataTable)g=require("datatables.net")(f,g).$;return e(g,f,f.document)}:e(jQuery,window,document)})(function(e,f,g){var j=e.fn.dataTable,i=function(b,a){if(!j.versionCheck||!j.versionCheck("1.10.8"))throw"DataTables RowReorder requires DataTables 1.10.8 or newer";this.c=e.extend(!0,{},j.defaults.rowReorder,
|
||||
i.defaults,a);this.s={bodyTop:null,dt:new j.Api(b),getDataFn:j.ext.oApi._fnGetObjectDataFn(this.c.dataSrc),middles:null,scroll:{},scrollInterval:null,setDataFn:j.ext.oApi._fnSetObjectDataFn(this.c.dataSrc),start:{top:0,left:0,offsetTop:0,offsetLeft:0,nodes:[]},windowHeight:0};this.dom={clone:null,dtScroll:e("div.dataTables_scrollBody",this.s.dt.table().container())};var c=this.s.dt.settings()[0],d=c.rowreorder;if(d)return d;c.rowreorder=this;this._constructor()};e.extend(i.prototype,{_constructor:function(){var b=
|
||||
this,a=this.s.dt,c=e(a.table().node());"static"===c.css("position")&&c.css("position","relative");e(a.table().container()).on("mousedown.rowReorder touchstart.rowReorder",this.c.selector,function(d){var c=e(this).closest("tr");if(a.row(c).any())return b._mouseDown(d,c),!1});a.on("destroy.rowReorder",function(){e(a.table().container()).off(".rowReorder");a.off(".rowReorder")})},_cachePositions:function(){var b=this.s.dt,a=e(b.table().node()).find("thead").outerHeight(),c=e.unique(b.rows({page:"current"}).nodes().toArray()),
|
||||
d=e.map(c,function(b){return e(b).position().top-a}),c=e.map(d,function(a,c){return d.length<c-1?(a+d[c+1])/2:(a+a+e(b.row(":last-child").node()).outerHeight())/2});this.s.middles=c;this.s.bodyTop=e(b.table().body()).offset().top;this.s.windowHeight=e(f).height()},_clone:function(b){var a=e(this.s.dt.table().node().cloneNode(!1)).addClass("dt-rowReorder-float").append("<tbody/>").append(b.clone(!1)),c=b.outerWidth(),d=b.outerHeight(),h=b.children().map(function(){return e(this).width()});a.width(c).height(d).find("tr").children().each(function(a){this.style.width=
|
||||
h[a]+"px"});a.appendTo("body");this.dom.clone=a},_clonePosition:function(b){var a=this.s.start,c=this._eventToPage(b,"Y")-a.top,b=this._eventToPage(b,"X")-a.left,d=this.c.snapX;this.dom.clone.css({top:c+a.offsetTop,left:!0===d?a.offsetLeft:"number"===typeof d?a.offsetLeft+d:b+a.offsetLeft})},_emitEvent:function(b,a){this.s.dt.iterator("table",function(c){e(c.nTable).triggerHandler(b+".dt",a)})},_eventToPage:function(b,a){return-1!==b.type.indexOf("touch")?b.originalEvent.touches[0]["page"+a]:b["page"+
|
||||
a]},_mouseDown:function(b,a){var c=this,d=this.s.dt,h=this.s.start,k=a.offset();h.top=this._eventToPage(b,"Y");h.left=this._eventToPage(b,"X");h.offsetTop=k.top;h.offsetLeft=k.left;h.nodes=e.unique(d.rows({page:"current"}).nodes().toArray());this._cachePositions();this._clone(a);this._clonePosition(b);this.dom.target=a;a.addClass("dt-rowReorder-moving");e(g).on("mouseup.rowReorder touchend.rowReorder",function(a){c._mouseUp(a)}).on("mousemove.rowReorder touchmove.rowReorder",function(a){c._mouseMove(a)});
|
||||
e(f).width()===e(g).width()&&e(g.body).addClass("dt-rowReorder-noOverflow");d=this.dom.dtScroll;this.s.scroll={windowHeight:e(f).height(),windowWidth:e(f).width(),dtTop:d.length?d.offset().top:null,dtLeft:d.length?d.offset().left:null,dtHeight:d.length?d.outerHeight():null,dtWidth:d.length?d.outerWidth():null}},_mouseMove:function(b){this._clonePosition(b);for(var a=this._eventToPage(b,"Y")-this.s.bodyTop,c=this.s.middles,d=null,h=this.s.dt,k=h.table().body(),g=0,f=c.length;g<f;g++)if(a<c[g]){d=g;
|
||||
break}null===d&&(d=c.length);if(null===this.s.lastInsert||this.s.lastInsert!==d)0===d?this.dom.target.prependTo(k):(a=e.unique(h.rows({page:"current"}).nodes().toArray()),d>this.s.lastInsert?this.dom.target.insertAfter(a[d-1]):this.dom.target.insertBefore(a[d])),this._cachePositions(),this.s.lastInsert=d;this._shiftScroll(b)},_mouseUp:function(){var b=this.s.dt,a,c,d=this.c.dataSrc;this.dom.clone.remove();this.dom.clone=null;this.dom.target.removeClass("dt-rowReorder-moving");e(g).off(".rowReorder");
|
||||
e(g.body).removeClass("dt-rowReorder-noOverflow");clearInterval(this.s.scrollInterval);this.s.scrollInterval=null;var h=this.s.start.nodes,k=e.unique(b.rows({page:"current"}).nodes().toArray()),f={},l=[],i=[],j=this.s.getDataFn,o=this.s.setDataFn;a=0;for(c=h.length;a<c;a++)if(h[a]!==k[a]){var m=b.row(k[a]).id(),p=b.row(k[a]).data(),n=b.row(h[a]).data();m&&(f[m]=j(n));l.push({node:k[a],oldData:j(p),newData:j(n),newPosition:a,oldPosition:e.inArray(k[a],h)});i.push(k[a])}h=[l,{dataSrc:d,nodes:i,values:f,
|
||||
triggerRow:b.row(this.dom.target)}];this._emitEvent("row-reorder",h);this.c.editor&&this.c.editor.edit(i,!1,{submit:"changed"}).multiSet(d,f).submit();if(this.c.update){a=0;for(c=l.length;a<c;a++)f=b.row(l[a].node).data(),o(f,l[a].newData),b.columns().every(function(){this.dataSrc()===d&&b.cell(l[a].node,this.index()).invalidate("data")});this._emitEvent("row-reordered",h);b.draw(!1)}},_shiftScroll:function(b){var a=this,c=this.s.scroll,d=!1,e=b.pageY-g.body.scrollTop,f,i;65>e?f=-5:e>c.windowHeight-
|
||||
65&&(f=5);null!==c.dtTop&&b.pageY<c.dtTop+65?i=-5:null!==c.dtTop&&b.pageY>c.dtTop+c.dtHeight-65&&(i=5);f||i?(c.windowVert=f,c.dtVert=i,d=!0):this.s.scrollInterval&&(clearInterval(this.s.scrollInterval),this.s.scrollInterval=null);!this.s.scrollInterval&&d&&(this.s.scrollInterval=setInterval(function(){if(c.windowVert)g.body.scrollTop=g.body.scrollTop+c.windowVert;if(c.dtVert){var b=a.dom.dtScroll[0];if(c.dtVert)b.scrollTop=b.scrollTop+c.dtVert}},20))}});i.defaults={dataSrc:0,editor:null,selector:"td:first-child",
|
||||
snapX:!1,update:!0};i.version="1.1.2";e.fn.dataTable.RowReorder=i;e.fn.DataTable.RowReorder=i;e(g).on("init.dt.dtr",function(b,a){if("dt"===b.namespace){var c=a.oInit.rowReorder,d=j.defaults.rowReorder;if(c||d)d=e.extend({},c,d),!1!==c&&new i(a,d)}});return i});
|
||||
Reference in New Issue
Block a user