JQuery Datatable editor updates data but does not update the table

ersanir

I am using JQuery Datatable Editor with Server Side processing using Java Servlet. Editing a row works fine but the updated data is not being shown in the table.
My table is defined as follows. Any suggestion is appreciated

$(document).ready(function () {

    var editor = new $.fn.dataTable.Editor( {
        ajax:  '/fda/intranet/translationNew/TranslationFileServ',
        table: '#example',
        idSrc:  'id',
        fields: [
            { label: 'Id', name: 'id',type:  "readonly" },
            { label: 'In Current File',  name: 'inCurrentFile',type:  "readonly"  },
            { label: 'en_us',  name: 'en_us',type:  "readonly"  },
            { label: 'translatedTo',  name: 'translatedTo',type:  "readonly"  },
            { label: 'translation',  name: 'translation', type: 'textarea'  }

            // etc
        ]       
    } );

    /*$('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
    editor.bubble( this );
    } );*/

     $('#example').DataTable({   

       "pageLength": 50,
        "lengthMenu": [
            [ 10, 50, 100 ],
            [ '10 rows', '50 rows', '100 rows' ]
        ], 
        "dom": 'Blfritp',
        "buttons": [

            {"extend" : "csv"}, "excel", "pdf",
            { extend: 'edit',   editor: editor }

        ],
        "orderCellsTop": true,
        "bProcessing" : true,
        "bServerSide" : true,
        "aaSorting": [],
        "sAjaxSource": "/fda/intranet/translationNew/TranslationFileServ",
        "fnServerData": 
            function(sSource, aoData, fnCallback,oSettings) {
              oSettings.jqXHR = $.ajax( {
                 "dataType": 'json',
                 "type": "POST",
                 "url": sSource+'?'+$.param(aoData),
                 "data": $("#sendQueryData").serializeArray(),
                 "success": fnCallback
              } )
            },
        "columns": [
            /*0*/   { "data": "id", "name" : "Id", "title" : "Id"  },
            /*0*/   { "data": "inCurrentFile", "name" : "In Current File" , "title" : "In Current File"},
                    { "data": "en_us", "name" : "en_us" , "title" : "en_us"},
                    { "data": "translatedTo", "name" : "translatedTo" , "title" : "translatedTo"},
                    { "data": "translation", "name" : "translation" , "title" : "translation"}


        ],

        select: 'single',
        "columnDefs": [


        ],
        initComplete: function() {
          var api = this.api();

          // Apply the search
          var filterColumns = [];
          api.columns(filterColumns).every(function() {
            var that = this;

            $('input', this.footer()).on('blur', function() {
              if (that.search() !== this.value) {
                that
                  .search(this.value)
                  .draw();
              }
            });
          });
          new $.fn.dataTable.Buttons(api, {
          'buttons': [

          ]
        });
         new $.fn.dataTable.Buttons(api, {
          'buttons': [
            'copy',
            'csv',
            {
              'extend': 'pdfHtml5',
              'orientation':  'landscape',
              'pageSize':  'LETTER',
              'exportOptions':
              {
                'columns':  ':visible'
              },
              'action': function(e, dt, button, config) {
                // Add code to make changes to table here
                $('#example').settings().page.len(-1);
                $('#example').settings().drawCallback = function (settings) {
                // Call the original action function afterwards to
                // continue the action.
                // Otherwise you're just overriding it completely.
                $.fn.dataTable.ext.buttons.pdfHtml5.action(e, dt, button, config);
                console.log("Its coming here again!");
                }
                $('#example').draw();
              }
            }
          ]
        });
        oTable = $('#example').DataTable();
        $('#btnSearch').click(function () {
            //hit search on server
            oTable.draw();
        });
        }
    });

ersanir

FYI, this is the JSON object that I saw in my browser console after the edit was successful

{"data":
[
{
"translatedTo":"es_es",
"en_us":"Do not risk product safety with this type of repair.",
"translation":"zxmcbzmcbzxb","DT_RowId":"c5c069f4-5a8e-4d68-b63d-b7ea70da8cbb",
"id":"c5c069f4-5a8e-4d68-b63d-b7ea70da8cbb",
"inCurrentFile":"no"
}
]
}

colin

Is that JSON returned from the server after the edit? Normally when these errors happen, the server isn't returning the expected data. It would be worth looking at the Ajax data tab on this example, as that shows you the expected format.

If that doesn't help, are you able to link to your page so we can take a look?

Colin

ersanir

Hi Colin,
to answer your first question, I can see the data returned from the server. I copied that JSON data and put it in my previous comment. Also, I check the Ajax Data tab in the example. The only difference I see is that "DT_RowId" value is not the first value in the returned JSON object. I am not sure if the order is important

colin

The reason I asked the first question is because you had five columns defined in the Editor data followed by an "etc", but only those same five are in the JSON data. Was that trimmed as well?

Colin

ersanir

That is just a comment. Sorry if it confused you.

allan

If you aren't using DT_RowId as the property that contains the row id, you need to use idSrc for Editor (which you are) and rowId for DataTables to tell them where to find the row's unique identifier.

Allan