Asked by:
jquery sortable save to database

Question
-
User-729601932 posted
Hello there,
i use jquery sortable to sort data from a database
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#clueTable tbody').sortable().disableSelection(); }); </script> <table id="clueTable" class="display">
<thead>
<tr>
<th>ID</th>
<th>x1</th>
<th>x2</th>
<th>Sort</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Test.OrderBy(s => s.Sort))
{
<tr>
<td>@Html.DisplayFor(modelItem => item.ID)</td>
<td>@Html.DisplayFor(modelItem => item.x1)</td>
<td>@Html.DisplayFor(modelItem => item.x2)</td>
<td>@Html.DisplayFor(modelItem => item.Sort)</td>
</tr>
}
</tbody>
</table>This works without any problems.
But now I want to write the sorting into the database field "Sort". Can someone tell me how I get that way?Tuesday, January 30, 2018 10:34 PM
All replies
-
User1168443798 posted
Hi Paul_412,
>> But now I want to write the sorting into the database field "Sort".
Do you mean you want to change Sort filed before saving the model to database, then the database could get the latest Sort?
If so, I suggest you follow steps below to achieve your requirement.
1.Change table code like below to add id attribute
<table id="clueTable" class="display"> <thead> <tr> <th>ID</th> <th>x1</th> <th>x2</th> <th>Sort</th> </tr> </thead> <tbody> @foreach (var item in Model.OrderBy(s => s.Name)) { <tr id="@item.Id"> <td >@Html.DisplayFor(modelItem => item.Id)</td> <td>@Html.DisplayFor(modelItem => item.Name)</td> </tr> } </tbody> </table>
2.After re-sort, you could try code below to get current sort result
$('#result').click(function () { var result = $('#clueTable tbody').sortable("toArray", { attribute: 'id' }); console.log(result); });
3.Then, you could loop the sort result to update your Sort field row by row
Best Regards,
Edward
Wednesday, January 31, 2018 2:39 AM -
User-729601932 posted
Edward Z
3.Then, you could loop the sort result to update your Sort field row by row
Hi Edward,can you tell me how i can update the sort field.
Sorry, but i am a absolut beginner regarding asp.netWednesday, January 31, 2018 4:01 PM -
User1168443798 posted
Hi Paul_42,
Did you get the id arrays?
You could pass these ids to Controller by ajax, and then update them to sort field by index of them.
If you have trouble to send ids by ajax or update fields after receiving them at Controller, please feel free to post new threads, we could discuss them separately.
Best Regards,
Edward
Thursday, February 1, 2018 7:25 AM -
User-1678984554 posted
Hi Paul,
I have a similar problem and thought you could give me a hand.
This is what I have in my View.cshtml
<table id="chapterList"> <thead> <tr class="ui-state-default"> <th colspan="4">Ordre</th> <th colspan="4">Num</th> <th colspan="4">Titre</th> </tr> </thead> <tbody> @foreach (var item in Model.Chapters) { <tr class="ui-state-default"> <td colspan="4"><span class="glyphicon glyphicon-move"></span></td> <td colspan="4">@Html.DisplayFor(modelItem => item.Num)</td> <td id="chapterOrder_@Html.DisplayFor(modelItem => item.Id)" colspan="4">@Html.DisplayFor(modelItem => item.Title)</td> <td colspan="4"> @Html.ActionLink("Voir", "ChapterDetails", new { chapterId = item.Id, courseId = Model.Id })</td> <td colspan="4"> @Html.ActionLink("Modifier", "EditChapter", new { chapterId = item.Id, courseId = Model.Id })</td> <td colspan="4"> @Html.ActionLink("Ajouter une lesson", "AddLesson", new { chapterId = item.Id, courseId = Model.Id })</td> </tr> } </tbody> </table>
<div id="validateOrder" class="form-group" style="display:none" :>
<div class="col-md-offset-2 col-md-10">
<input id="validateOrderBtn" type="submit" value="Valider le tri" class="btn btn-default" />
</div>
</div>I tried using JQuery Sortable today but apart from being able to change order on client-side, I don't know how to send the data to my controller.
This is my JQuery code that uses the "Sortable" widget.
$(document).ready(function () { $("#chapterList tbody").sortable({ update: function (event, ui) { $(this).children().each(function (index) { $(this).find("td:nth-child(2)").html(index + 1) var result = $("#chapterList tbody").sortable("toArray", { attribute: 'id' }); console.log(result); }); $("#validateOrder").show(); } }); $(function () { $("#validateOrderBtn").button(); $("#validateOrderBtn").click(function () { alert(''); //var result = $("#chapterList tbody").sortable("toArray", { attribute: 'id' }); var result = $("#chapterList tbody").sortable("toArray"); console.log(result); debugger; //$.ajax({ // url: '/Admin/SortedLists/', // data: { items: $("#sortable").sortable('toArray') }, // type: 'post', // traditional: true //}); }); }); });
Tried what you suggested and consoled.log the result of what is put into the array.. All I get is an Array of empty strings.
I consider giving up trying to get those data and just collect them myself looping though the <tr> children and saving them myself but that I'd like to understand that "Sortable" thing and see how it should work.Thanks in advance for your help
All the best
Sunday, October 13, 2019 7:34 PM