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

timmynz

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 }
            ]
        });
    });

allan

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

timmynz

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!

kthorngren

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

Kevin

timmynz

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

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

allan

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