<!--
https://www.kodingmadesimple.com/2017/12/jquery-datatables-php-mysql-ajax.html
https://www.ksia.or.kr/plugin/DataTables-1.10.15/extensions/RowReorder/examples/initialisation/selector.html
-->
<!DOCTYPE html>
<html>
<head>
<title>Datatables Example using PHP and MySQL</title>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://www.ksia.or.kr/plugin/DataTables-1.10.15/extensions/RowReorder/css/rowReorder.dataTables.css">
</head>
<body>
<h2 style="text-align:center;">Datatables Server-Side Example</h2>
<div id="result" class="box">
Event result:
</div>
<table id="customersTable" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<!-- <script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js" charset="utf8" type="text/javascript"></script> -->
<script src="https://www.ksia.or.kr/plugin/DataTables-1.10.15/media/js/jquery.dataTables.js" type="text/javascript"></script>
<script src="https://www.ksia.or.kr/plugin/DataTables-1.10.15/extensions/RowReorder/js/dataTables.rowReorder.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#customersTable').dataTable({
"processing": true,
rowReorder: {
selector: 'tr'
},
columnDefs: [
{ targets: 0, visible: false }
],
"ajax": "fetch_records.php",
"columns": [
{data: 'id'},
{data: 'name'},
{data: 'email'}
]
});
table.on('row-reorder', function (e, diff, edit) {
let result = 'Reorder started on row: ' + edit.triggerRow.data()[1] + '<br>';
for (var i = 0, ien = diff.length; i < ien; i++) {
let rowData = table.row(diff[i].node).data();
result +=
`${rowData[1]} updated to be in position ${diff[i].newData} ` +
`(was ${diff[i].oldData})<br>`;
}
document.querySelector('#result').innerHTML = 'Event result:<br>' + result;
});
});
</script>
</body>
</html>