jQuery DataTables – Row reordering
Example for article at
http://www.gyrocode.com/articles/jquery-datatables-row-reordering/
HTML
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://mpryvkin.github.io/jquery-datatables-row-reordering/1.2.3/jquery.dataTables.rowReordering.js"></script>
<h3><a href="http://www.gyrocode.com/articles/jquery-datatables-row-reordering/">jQuery DataTables – Row reordering</a></h3>
<a href="http://www.gyrocode.com/articles/jquery-datatables-row-reordering/">See full article on Gyrocode.com</a>
<hr><br>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<hr>
<script>
$(document).ready(function (){
// AJAX emulation
$.mockjax({
url: 'ids-arrays.txt',
responseTime: 200,
responseText: {
"data": [
["1","Tiger Nixon","System Architect","Edinburgh","5421","2011\/04\/25","$320,800"],
["2","Garrett Winters","Accountant","Tokyo","8422","2011\/07\/25","$170,750"],
["3","Ashton Cox","Junior Technical Author","San Francisco","1562","2009\/01\/12","$86,000"],
["4","Cedric Kelly","Senior Javascript Developer","Edinburgh","6224","2012\/03\/29","$433,060"],
["5","Airi Satou","Accountant","Tokyo","5407","2008\/11\/28","$162,700"],
["6","Brielle Williamson","Integration...
JavaScript
$(document).ready(function(){
var table = $('#example').DataTable({
'ajax': {
'url': 'ids-arrays.txt'
},
'createdRow': function(row, data, dataIndex){
$(row).attr('id', 'row-' + dataIndex);
}
});
table.rowReordering();
table.rowGroup = {dataSrc: 3};
});