locked
jquery sortable save to database RRS feed

  • 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.net

    Wednesday, 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