DataTables Edit Not Updating DataTables row after edition

ingila

I have my DataTables editor defined as

editor = new $.fn.dataTable.Editor({
    "ajax": "../ajax/data/objects.txt",
    "table": "#example",
     idSrc:  'id',
    "fields": [ 
        {
            "label": "ID:",
            "name": "id",
            type: "hidden"
        },          
        {
            "label": "Name:",
            "name": "name"
        }, {
            "label": "Position:",
            "name": "position"
        }, {
            "label": "Salary:",
            "name": "salary"
        },          
        {
            "label": "Start date:",
            "name": "start_date",
            "type": "datetime"
        },          
        {
            "label": "Office:",
            "name": "office"
        }, 
        {
            "label": "Extension:",
            "name": "extn"
        }
    ]
    } );

And my edit method defined as:

  $('#example').on('click', 'a.editor_edit', function (e) {
    e.preventDefault();                 
    editor.edit( $(this).closest('tr'), {
        title: 'Edit record',
        buttons: 'Update'
    } );

    } );

It displays all the right information except when I click on Update, it doesn't update the row in the table. Below is my dataTable implementation. Please let me know where am I going wrong.

    var table = $('#example').DataTable( {
 dom: "Blfrtip",    
"ajax": "../ajax/data/objects.txt",     
"columnDefs": [ {
        orderable: false,
        className: 'select-checkbox',
        targets:   0
    } ],
"columns": [
        {
            data: null,
            defaultContent: '',
            className: 'select-checkbox',
            orderable: false
        },

        { "data": "id"},
        { "data": "name" },
        { "data": "position" },
        { "data": "salary" },
        { "data": "start_date" },
        { "data": "office" },
        { "data": "extn" },
        {
            data: null,
            className: "center",
            defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>'
        }
    ],

     rowId: 'id',

    //select: {'style': 'multi'},     
    select:true,     
    buttons: [      
    {
      text: 'Select All',
            key: '1',
            action: function ( e, dt, node, config ) {                  
                table.rows().select();
            }

    },

    {
      text: 'Deselect All',
            key: '1',
            action: function ( e, dt, node, config ) {
                table.rows().deselect();
            }       
    }


    ],
     "bAutoWidth":false,
     "order": [[0, 'asc']]
      });

Any help would be highly appreciated.

allan

Are you using Editor 1.7.1? I'm afraid there is a bug in 1.7.1 which would cause this. 1.7.2 is being released at this very moment with the fix.

Allan

ingila

@allan I recently downloaded the trial version like a couple of days back. What version was up for trial download if you have any idea? If it wasn't the latest one, can you share a link with me to download 1.7.2(trial version .css and .js)

ingila

@allan I checked and downloaded trial version of DataTables 1.7.2, the problem still persists.

allan

Ah - I see the problem. The issue is that you are submitting the Ajax data to a text file. There is nothing (i.e. a script / program) to receive the data at the server-side, process it and add it to a database or the file. The provided libraries for Editor work with a database. If you need to write directly to a JSON file you would need to write your own server-side scripts.

Allan

ingila

@allan any live working example of what you've explained?

allan

All of the examples listed here use a PHP server-side script to update a database with the data submitted by the user. There are also .NET and NodeJS libraries for Editor available.

Allan