Monday, November 25, 2013

jQuery Sortable Table Rows Example

On the current project that I am working on the customer was wanting to be able to reorder table rows by dragging and dropping them in the desired order. Also the records' text would need update itself displaying the new order of the records. Here is the proof of concept code.

Here is the JSFiddle result. And, here is the JSFiddle code. Enjoy!

<!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>
view raw jQuerySortableTable.html hosted with ❤ by GitHub

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)