Dragtable

by Yusril Maulidan Raji

HTML

<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css">
<script src="https://rawgit.com/jebaird/dragtable/master/src/js/jquery.dragtable.js"></script>
<link rel="stylesheet" href="https://rawgit.com/jebaird/dragtable/master/src/css/dragtable-default.css">
<body>
<table id="dpUsedItems" class="dpUsedItems">
                                <thead>
                                    <tr>
                                        <th data-header="useditems-item" colspan="2" style="text-align: left;">
                                            Item
                                        </th>
                                        <th data-header="useditems-date" style="text-align: left;">
                                            Date
                                        </th>
                                        <th data-header="useditems-quantity" style="text-align: right;">
                                            Quantity
                                        </th>
                                        <th data-header="useditems-remark" style="text-align: left;">
                                            Remark
                                        </th>
                                        <th data-header="useditems-total" style="text-align: right;">
                                            Total
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!--{MO-REPEAT value="UsedItem"}-->
                                    <tr>
								        <td align="center">
									        Picture
								        </td>
                                        <td align="left">
               ...

CSS

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* add some styling to the table, padding etc*/
table thead th{
	padding:3px 10px;
	border-bottom:1px solid #000000;
	background:#CCCCCC;
	background-size: 50%;
}
table tbody td{
	padding:3px 10px;
	white-space: no
}
table tbody tr:nth-of-type(2n+1) td{
	background:#7AA6DC;
}

tfoot td{
	background: #ccc;
}
#three tbody tr:nth-of-type(2n+1) td{
	background:#82CE76;
}
.drag{
	background:#CCCCCC !important;
	color:#cCCCCC;
}

.dragtable-drag-handle{
	height:.5em;
	width: 5px;
	float: right;
	background:green;
}

.tablewrapper{
	position: relative;
	overflow: scroll;
	width: 400px;
	margin: 3em;
}
.tablewrapper table{
	width: 100%;
}
.test3{
	/*border-right: 5px solid red !important;*/
}

JavaScript

$(document).ready(function(){
$('table').each(function(){
	
		$(this).dragtable({
		placeholder: 'dragtable-col-placeholder test3',
		items: 'thead th:not( .notdraggable ):not( :has( .dragtable-drag-handle ) ), .dragtable-drag-handle',
		scroll: true
	});
	
	
})
	$('a.order').click(function(){

		console.log($('#one').dragtable('order'));
		return false;
	});
	$('a.setorder').click(function(){
		$('#one').dragtable('order',["first_name", "id", "last_name", "phone_number", "salary" , "color"])
	})
});