145 lines
4.3 KiB
PHP
145 lines
4.3 KiB
PHP
<?php include_once('config.php'); ?>
|
|
<link href="../bootstrap/node_modules/bootstrap/dist/css/bootstrap.ali.css" rel="stylesheet">
|
|
<!------ Include the above in your HEAD tag ---------->
|
|
|
|
<!-- Pulled from http://www.avtex.com/blog/2015/01/27/drag-and-drop-sorting-of-table-rows-in-priority-order/ -->
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>Steven Ray: Drag and drop sorting of table rows</title>
|
|
|
|
<link href="../demo.css" type="text/css" rel="stylesheet" />
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="../bootstrap/node_modules/bootstrap/dist/css/bootstrap.ali.css" rel="stylesheet">
|
|
|
|
<!-- jQuery
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
|
|
-->
|
|
<script src="../jquery/jquery-1.12.4.js"></script>
|
|
|
|
<!-- jQuery UI CSS
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
|
|
-->
|
|
<script src="../jquery/jquery-ui.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
$(document).ready(function() {
|
|
|
|
//Helper function to keep table row from collapsing when being sorted
|
|
var fixHelperModified = function(e, tr) {
|
|
var $originals = tr.children();
|
|
var $helper = tr.clone();
|
|
$helper.children().each(function(index)
|
|
{
|
|
$(this).width($originals.eq(index).width())
|
|
});
|
|
return $helper;
|
|
};
|
|
|
|
//Make diagnosis table sortable
|
|
$("#sortable tbody").sortable({
|
|
helper: fixHelperModified,
|
|
stop: function(event,ui) {
|
|
renumber_table('#sortable')
|
|
var order = $('#sortable tbody').sortable('toArray', { attribute: 'data-sort-id'});
|
|
console.log(order.join(','));
|
|
sortOrder = order.join(',');
|
|
$.post(
|
|
'action-form.ajax.php',
|
|
{'action':'updateSortedRows','sortOrder':sortOrder},
|
|
function(data){
|
|
var a = data.split('|***|');
|
|
if(a[1]=="update"){
|
|
$('#msg').html(a[0]);
|
|
}
|
|
}
|
|
);
|
|
|
|
}
|
|
}).disableSelection();
|
|
|
|
|
|
//Delete button in table rows
|
|
$('table').on('click','.btn-delete',function() {
|
|
tableID = '#' + $(this).closest('table').attr('id');
|
|
r = confirm('Delete this item?');
|
|
if(r) {
|
|
$(this).closest('tr').remove();
|
|
renumber_table(tableID);
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
//Renumber table rows
|
|
function renumber_table(tableID) {
|
|
$(tableID + " tr").each(function() {
|
|
count = $(this).parent().children().index($(this)) + 1;
|
|
$(this).find('.priority').html(count);
|
|
});
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style type="text/css">
|
|
.ui-sortable tr {
|
|
cursor:pointer;
|
|
}
|
|
|
|
.ui-sortable tr:hover {
|
|
background:rgba(244,251,17,0.45);
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="content" class="container">
|
|
|
|
<h1>Sortable table</h1>
|
|
|
|
<table class="table" id="sortable">
|
|
<thead>
|
|
<tr>
|
|
<th width="20">Action</th>
|
|
<th width="120" class="text-center">Inset DT</th>
|
|
<th>User Name</th>
|
|
<th>User Country</th>
|
|
<th>User Email</th>
|
|
<th>User Phone#</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tb">
|
|
<?php
|
|
$result = $db->query("SELECT * FROM reorderusers WHERE 1 ORDER BY userorder ASC ");
|
|
if($result->num_rows>0){
|
|
$i=0;
|
|
while($val = $result->fetch_assoc()){
|
|
$i++;
|
|
?>
|
|
<tr data-sort-id="<?php echo $val['id'];?>">
|
|
<td class="priority" align="center"><?php echo $i; ?></td>
|
|
<td align="center"><?php echo $val['dt']; ?></td>
|
|
<td><?php echo mb_strtoupper($val['username'],'UTF-8'); ?></td>
|
|
<td><?php echo mb_strtoupper($counrtyName[$val['usercountry']],'UTF-8'); ?></td>
|
|
<td><?php echo $val['useremail']; ?></td>
|
|
<td><?php echo $val['userphone']; ?></td>
|
|
</tr>
|
|
<?php
|
|
}
|
|
} ?>
|
|
</tbody>
|
|
</table>
|
|
<div id="msg"></div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|