Skip to content

Instantly share code, notes, and snippets.

@m2web

m2web/jQuerySortableTable.html

Last active December 29, 2015 08:29
Show Gist options
  • Save m2web/7644195 to your computer and use it in GitHub Desktop.
Save m2web/7644195 to your computer and use it in GitHub Desktop.
Download ZIP
Example code of jQuery Sortable Table Rows
Raw
jQuerySortableTable.html
<!DOCTYPE html>
<html>
<head>
<title>Soratble Table Rows</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
</head>
<body>
<table border="1" id="formTable">
<thead><th>View</th><th>Page</th><th>Sheet #</th><th>Reason</th><th>Location</th></thead>
<tbody id="sortThis">
<tr>
<td style="text-align:center;"><input type="button"></td>
<td>1</td>
<td>
<select>
<option value="1">Sheet 1</option>
<option value="2" selected>Sheet 2</option>
<option value="3">Sheet 3</option>
<option value="4">Sheet 4</option>
</select>
</td>
<td>Policy addition</td>
<td>
<select>
<option value="1" selected>Policy</option>
<option value="2">Pocket</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:center;"><input type="button"></td>
<td>2</td>
<td>
<select>
<option value="1" selected>Sheet 1</option>
<option value="2">Sheet 2</option>
<option value="3">Sheet 3</option>
<option value="4">Sheet 4</option>
</select>
</td>
<td>Privacy Notice</td>
<td>
<select>
<option value="1" selected>Policy</option>
<option value="2">Pocket</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:center;"><input type="button"></td>
<td>3</td>
<td>
<select>
<option value="1">Sheet 1</option>
<option value="2">Sheet 2</option>
<option value="3" selected>Sheet 3</option>
<option value="4">Sheet 4</option>
</select>
</td>
<td>Disclosure</td>
<td>
<select>
<option value="1">Policy</option>
<option value="2" selected>Pocket</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:center;"><input type="button"></td>
<td>4</td>
<td>
<select>
<option value="1">Sheet 1</option>
<option value="2" selected>Sheet 2</option>
<option value="3">Sheet 3</option>
<option value="4">Sheet 4</option>
</select>
</td>
<td>Policy addition</td>
<td>
<select>
<option value="1" selected>Policy</option>
<option value="2">Pocket</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:center;"><input type="button"></td>
<td>5</td>
<td>
<select>
<option value="1" selected>Sheet 1</option>
<option value="2">Sheet 2</option>
<option value="3">Sheet 3</option>
<option value="4">Sheet 4</option>
</select>
</td>
<td>Privacy Notice</td>
<td>
<select>
<option value="1" selected>Policy</option>
<option value="2">Pocket</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:center;"><input type="button"></td>
<td>6</td>
<td>
<select>
<option value="1">Sheet 1</option>
<option value="2">Sheet 2</option>
<option value="3" selected>Sheet 3</option>
<option value="4">Sheet 4</option>
</select>
</td>
<td>Disclosure</td>
<td>
<select>
<option value="1">Policy</option>
<option value="2" selected>Pocket</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:center;"><input type="button"></td>
<td>7</td>
<td>
<select>
<option value="1">Sheet 1</option>
<option value="2" selected>Sheet 2</option>
<option value="3">Sheet 3</option>
<option value="4">Sheet 4</option>
</select>
</td>
<td>Policy addition</td>
<td>
<select>
<option value="1" selected>Policy</option>
<option value="2">Pocket</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:center;"><input type="button"></td>
<td>8</td>
<td>
<select>
<option value="1" selected>Sheet 1</option>
<option value="2">Sheet 2</option>
<option value="3">Sheet 3</option>
<option value="4">Sheet 4</option>
</select>
</td>
<td>Privacy Notice</td>
<td>
<select>
<option value="1" selected>Policy</option>
<option value="2">Pocket</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:center;"><input type="button"></td>
<td>9</td>
<td>
<select>
<option value="1">Sheet 1</option>
<option value="2">Sheet 2</option>
<option value="3" selected>Sheet 3</option>
<option value="4">Sheet 4</option>
</select>
</td>
<td><span id="target">Disclosure</span></td>
<td>
<select>
<option value="1">Policy</option>
<option value="2" selected>Pocket</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$('tbody#sortThis').sortable({
start: function(event, ui) {
//Let's set the starting position of an row in the table to ensure the correct row index
var start_pos = ui.item.index() + 1;
ui.item.data('start_pos', start_pos);
},
change: function(event, ui) {
//When the item postion is changed while dragging a item, get it's position
var start_pos = ui.item.data('start_pos');
//get the direction of the drag motion
var dragDirection = start_pos < ui.placeholder.index() ? "down" : "up";
ui.item.data('drag_direction', dragDirection);
},
stop: function(event, ui) {
//get the table where the sorting is happening
var thisTable = document.getElementById('formTable');
//get the row index of where the dragged row has stopped
var movedRowIndex = (ui.item.index() + 1);
//get the page # cell and update the text to the stopped location
var pageNumberCell = $(thisTable.rows[movedRowIndex].cells[1]);
pageNumberCell.text((ui.item.index() + 1));
//get the direction 'up' or 'down' that the record was dragged.
var drag_direction = ui.item.data('drag_direction');
//if the record was drageed down the table, update record page#s above
if(drag_direction == 'down'){
for (var i=1; i < thisTable.rows.length; i++){
if(i < movedRowIndex){
$(thisTable.rows[i].cells[1]).text(i);
}
}
}
//if the record was drageed up the table, update record page#s below
if(drag_direction == 'up'){
for (var i=1; i < thisTable.rows.length; i++){
if(i > movedRowIndex){
$(thisTable.rows[i].cells[1]).text(i);
}
}
}
}
});
$('tbody#sortThis' ).disableSelection();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment