I have an HTML table that holds records for the 3 top contestants for an event. 1st, 2nd, 3rd. When a referee for the event is verifying the positions of the contestants,he has the ability to drag and drop the rows into different positions. So he could drag the 1st row into the 2nd position and the 3rd into the 2nd etc.
I have the dragging and dropping of the rows to different positions working correctly, but I am having trouble storing the positions of the row. If the 1st row is dragged to 2nd it works, but after the page is refreshed, the row reverts back to it's original position of first.
To store the position of the row after the user has dragged I am simply putting the position value of the row into a hidden table cell.
Here is the code I am using to store the position of the row after it has been dragged into a new position.
$(function() {
$('tbody').sortable({
axis: 'y',
handle: ".dragger",
update: function(event, ui) {
var table = $(this).parent();
var row_count = table.find('tr').length;
row_count -= 2;
for (var i=1; i <= row_count; i++) {
table.find('td.rank').each(function() {
if ($(this).parent().prop('rowIndex') === i) {
var id = ($(this).parent().attr('id'));
$(this).html(i);
var url = '<?= base_url(); ?>/results/setrowrank';
$.ajax({
type: 'POST',
url: url,
data: { 'table': table.attr('id'), 'finalrank': i, 'id': id },
success: function(data) {
alert(data);
}
})
}
});
}
});
});
This seems to work exactly as I have intended, with final rank, storing the value for the position oif the row after it has been dragged.
Here is the code I am struggling with. What I am trying to achieve is check the finalrank value for the row, and set the row to that position in the table.
$(".finalrank").hide();
for(var i=1; i<= row_count; i++) {
$this.find('td.finalrank').each(function() {
$(this).parent().index(parseInt($(this).html()));
})
}
What I am trying to do in the above code is check the value of finalrank and then set the row to the position in the table. I know you can get the index for a row, but I cannot seem to be able to set the position.
EDIT: Include code for rendering of the HTML table:
<div class="row">
<div class="col">
<?php
$i = 0;
echo "<div class='row' style='margin-top: 10px;'>";
echo "<div class='col-md-9'>";
echo "<h2>" . $tablename . "</h2>";
echo "</div>";
echo "<div class='col-md-3' align='right'>";
echo "<a href='' onclick='refreshtable();' class='refresh'><img src='" . base_url() . "assets/images/ref.png' width='120'></a>";
echo "</div>";
echo "</div>";
echo "<div class='row' id='tablerow'>";
echo "<div class='col'>";
echo "<table class='table' id='" . $dbname . "'>";
echo "<tr style='backgound: grey;'>";
echo "<th></th>";
unset($headnames[0]);
unset($headnames[2]);
unset($headnames[5]);
unset($headnames[6]);
unset($headnames[8]);
unset($headnames[9]);
unset($headnames[10]);
unset($headnames[11]);
unset($headnames[12]);
unset($headnames[13]);
unset($headnames[14]);
unset($headnames[16]);
unset($headnames[17]);
unset($headnames[18]);
unset($headnames[19]);
unset($headnames[20]);
unset($headnames[21]);
unset($headnames[23]);
unset($headnames[24]);
unset($headnames[25]);
unset($headnames[26]);
unset($headnames[27]);
unset($headnames[28]);
unset($headnames[29]);
unset($headnames[30]);
unset($headnames[31]);
unset($headnames[32]);
unset($headnames[33]);
unset($headnames[34]);
unset($headnames[35]);
foreach ($headnames as $head) {
echo "<th>" . $head . "</th>";
}
echo "<th class='draghead'></th>";
echo "</tr>";
echo "<tbody>";
foreach($results as $table) {
echo "<tr id='row_" . $table->id . "' class='rowid'>";
echo "<td align='center' class='dragger'><img width='25' src='" . base_url() . "/assets/images/dragger.png'></td>";
echo "<td class='rank'>" . $table->Rank . "</td>";
echo "<td style='padding-left: 10px;'>" . $table->Bib . "</td>";
echo "<td>" . $table->FirstName . "</td>";
echo "<td>" . $table->Age . "</td>";
echo "<td>" . $table->Club . "</td>";
echo "<td class='timecol'>" . $table->Time . "</td>";
echo "<td style=''display: none' class='rowstate'>" . $table->rowstate . "</td>";
echo "<td style=''display: none' class='finalrank'>" . $table->finalrank . "</td>";
echo "<td><input id='" . $table->id . "-" . $dbname . "' type='checkbox' class='rowli' name='check_" . $table->id . "'><span class='rowline'></span></td>";
echo "<td><a href='#' class='editbut' onclick='return updaterow(\"" . $table->id . "\",\"" . $dbname . "\");'><img src='" . base_url() . "assets/images/editicon.png' width='80' style='padding-left: 20px;'></a><a id='delbut' onclick='return deletedata(\"" . $table->id . "\",\"" . $dbname. "\");' class='delbut' href=''><img src='" . base_url() . "assets/images/deleteicon.png' width='75' style='padding-left: 5px;'></a></td>";
echo "</tr>";
$i++;
}
echo "</tbody>";
echo "<tr id='butrow'>";
echo "<td colspan='8'>";
echo "<div class='row' style='margin-bottom: 30px;'>";
echo "<div class='col'>";
echo "<a href='' id='" . $dbname . "' class='approvebut'><img src='" . base_url() . "assets/images/approve.png' width='120'></a>";
echo "</div>";
echo "<div align='left' text-align: left; style='margin-top: 7px;'>";
echo "<b><span class='note'>*PLEASE NOTE THAT ONCE YOU CLICK APPROVE THE RESULTS ARE FINAL</span></b>";
echo "</div>";
echo "</div>";
echo "</td>";
echo "</tr>";
echo "<tr>";
echo "<td><button id='backbutton' class='btn btn-primary' onclick='window.history.back();'>Results Index</button></td>";
echo "</tr>";
echo "</table>";
?>
</div>
</div>
