A newly created record is not shown in the table after create button is clicked

e8416o8

I have been trying to fix the issue for a week now.
I don't get any errors in the inspect of chrome.
According to JSONLint, JSON data format between client & server are correct.
But after the create button is clicked, the newly added row is not shown in the table.
Please pinpoint what the issue(s) are.

Thanks,
Karen

Here is my js code sinpet:

...
var editor;

$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
serverSide: true,
ajax: '/myPayers/DataTableServlet',

    ajax: {
        create: {
            type: 'POST',
            url:  '/myPayers/AddData',
            contentType: 'application/json',
            dataType: 'json',
            data: function ( data ) {
                    console.log("Create-data="+JSON.stringify( data ));
                    return JSON.stringify( data );
            },
            success: function(data) {
                var table = $('#payers').DataTable();
                alert(JSON.stringify(data) + ' is added successfully');
                table.draw();
                editor.close();
            },
            error:function(data,status,er) {
                alert("Add error: "+JSON.stringify(data)+" status: "+status+" er:"+er);
            }            },
        edit: {
            type: 'POST',
            url:  '/myPayers/UpdateData',
            contentType: 'application/json',
            data: function ( data ) {
                    return JSON.stringify( data );
            },
            success: function(data) {
                var table = $('#payers').DataTable();
                alert(JSON.stringify(data) + ' is added successfully');
                table.draw();
                editor.close();
            },
            error: function(data) {
                alert('fail');
            }
        },
        remove: {
            type: 'DELETE',
            url:  '/myPayers/DeleteData'
            }
     },

    table: '#payers',
    idSrc:  0,
    fields: [ /*{
            label: "PUID:",
            name:  "id",
            type: "readonly"
        },*/{
            label: "PyrContractUID:",
            name:  "pyrContractUID",
            type:  "readonly"
        }, {
            label: "Payer ID:",
            id:    "payerID",
            name:  "payerID"
        }, {
            label: "Payer Name:",
            id:    "payerName",
            name:  "payerName"
        }, {
            label: "Rate Schedule:",
            id:    "rateSchedule",
            name:  "rateSchedule"
        }, {
            label: "Ins Co:",
            id:    "insCo",
            name:  "insCo",
        }, {
            label: "Ins Type:",
            id:    "insType",
            name:  "insType",
        }, {
            label: "Ins Group ID:",
            id:    "groupID",
            name:  "groupID",
        }, {
            label: "Effective:",
            id:    "eff",
            name:  "eff",
            type: "date"
        }, {
            label: "Termination:",
            id:    "term",
            name:  "term",
            type:  "date"
        }
    ]
} );

$('#payers').DataTable( {

    dom: 'Bfrtip',
    type: 'POST',
    bServerSide: true,
    sAjaxSource: '/myPayers/DataTableServlet',
    idSrc:  0,
    processing: true,
    paging: true,
    lengthChange: true,
    lengthMenu: [ 10, 25, 50, 75, 100 ],
    bJQueryUI: true,

    columns: [

        { data: 0, "sortable": false, "visible": false},  // PyrContractUID
        { data: 1},   // payerID
        { data: 2, editField: 2},   // payerName
        { data: 3, editField: 3},   // rateSchedule
        { data: 4},   // insCo
        { data: 5},   // insType
        { data: 6},   //  groupID
        { data: 7},   //  eff
        { data: 8}    //  term
    ],

    columnDefs: [ 
                 { "targets": "rateSchedule",  
                   "defaultContent": "",
                 },
                 { "targets": "insCo",  
                     "defaultContent": "",
                   },
                 { "targets": "insType", 
                     "defaultContent": "",
                 },
                 { "targets": "groupID", 
                     "defaultContent": "",
                 }
    ],                     

    select: true,
    buttons: [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
    ],
});

e8416o8

I am afraid I can't provide the link since it is on a secured box. :(

allan

You are providing a custom success function in the ajax objects. However, the documentation (ajax) notes:

Please note that the success and error options should not be overridden as these are used by Editor.

Your edit object also has the same problem.

Allan

e8416o8

Create/Edit are working as expected.
Thank you so much for your help, Allan.

Karen