DataTable().draw(); does not update table after create

DataTable().draw(); does not update table after create

timmynztimmynz Posts: 9Questions: 2Answers: 0

Hi There,

I am using datatables and editor extensively for a project. It is mostly working very well. I do have one issue though that I can't seem to resolve.

I have a datatable that i am using to add and remove records. It just has a single field. I am able to delete perfectly however I am having issues adding a record. Upon clicking the New button my form appears which is just one field which is a select. I can save this and it is posted to the server perfectly using ajax where it is saved and a json success is returned. So i now tell the datatable to redraw but the new record is not added to the datatable. If i refresh the page the new record appears perfectly.

I have done similar on other pages and it works perfectly so I am a bit stumped.

Here is the code:

Html

  <table id="Staff" class="table table-striped table-bordered" style="width:100%">
          <thead>
                 <tr>

                        <th></th>
                         <th>Name</th>

                 </tr>
           </thead>
                        
   </table>

javascript

    var editorStaff;
    $(document).ready(function () {


        var array = @Html.Raw(Json.Serialize(ViewBag.Counsellor));

        editorStaff = new $.fn.dataTable.Editor({
            ajax: {
                url: "/Sessions/EditStaff?sessionid=" + @Model.SessionId,
                data: function (d) {
                    return JSON.stringify(d);
                },
                contentType: "application/json",
                success: function (data) {

                    $("#Staff").DataTable().draw();

                }
            },
            idSrc: 'sessionStaffId',
            table: "#Staff",
            fields: [{
                label: "Staff Member:",
                name: "staffId",
                type: "select",
                options: array,
                optionsPair: {
                    label: 'text',
                    value: 'value'
                }
            }
            ]
        });


        $("#Staff").DataTable({
            dom: "Bfrtip",
            ajax: "/Sessions/LoadSessionStaff?sessionid=" + @Model.SessionId,
            "processing": true, // for show progress bar
            "serverSide": false, // for process server side
            "filter": false, // this is for disable filter (search box)
            "orderMulti": false, // for disable multiple column at once
            "order": [],
            "paging": false,
            "ordering": false,
            "info": false,
            select: {
                selector: 'td:first-child',
                style: 'os',
            },
            "columns": [
                {
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false
                },
                { "data": "staffId", "name": "staffId", "autoWidth": true }
            ],
            buttons: [
                { extend: "create", editor: editorStaff},
                { extend: "remove", editor: editorStaff }
            ]
        });
    });

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    You shouldn't need to call $("#Staff").DataTable().draw();. Editor will do that automatically for you.

    My guess is that the server isn't responding with the data that Editor expects. What is it currently responding with to the create action?

    Allan

  • timmynztimmynz Posts: 9Questions: 2Answers: 0

    Oh, its just returning json success: return Json(new { success = true, responseText = "Updated record" });

    What should i be returning? Im using .Net core which doesn't seem to have a library so im coding it all myself. Do I return the new record?

    Thanks for your help so far!

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    This page describes the expected client / server data exchanges with the Editor:
    https://editor.datatables.net/manual/server#Example-data-exchanges

    Kevin

  • timmynztimmynz Posts: 9Questions: 2Answers: 0

    Thank you very much, that fixed it!!!!

    Any ideas about why my approach worked in other scenarios and not this one?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    The delete action doesn't really need anything in the way of confirmation from the server (other than no error message being given!). Add and Edit on the other hand do look for the data being returned from the server (to allow for server-side computed fields).

    Allan

This discussion has been closed.