DataTable : how to reload/update one row of dataTable? ajax.reload()

Amitawinash

I am using MongoDb as my database , laravel for server and angularjs 1.6 for fronted.

How to reload one row of DataTable instead of loading whole content of the DataTable.

I tired like this

setInterval( function () {
data_table.ajax.reload( null, data_table.rows({selected:true}).data()[0]._id );}, 30000 );

I am passing one Id in second argument in ajax.reload API.

I am expecting that the above code will call Laravel show($id) (In controller) method , the updated value of that Id I will fetch from MongoDb return to DataTable so that DataTable will update only that particular row.

I am not sure that my above approach is correct or not, so please help me to figure out How to update one row in DataTable.

kthorngren

In the ajax.reload() docs it shows two parameters: ajax.reload( callback, resetPaging ). This is going to request all the data not just the one record.

Instead you will need to use ajax and use the data option to send the id as the parameter for the server. Your server code will return the desired record and you can use something like this to update the row:
data_table.rows({selected:true}).data( data )

The data returned needs to be in the proper format for the row.

Kevin

Amitawinash

Hi Kthorngren ,

I tried your suggestion but found that .rows.data() can not be use to edit datatable's data.

Link is here

Thank You

kthorngren

Sorry, you are right. You can use row().data() to update data for a single row. Missed the fact that you had rows in your statement.

You can use:
data_table.row({selected:true}).data( data )

Kevin

Astroniklas

You don't need to even have to use the {selected: true} flag. You can pass the entire row as parameter and DataTables will know which row you wish to modify.

To retrieve the row,

//Event listener for button click in DataTables
        $('#addressTable tbody').on('click',
            'button',
            function () {
                if ( $(this).hasClass('updateRecordButton') ) {
                    var data = table.row($(this).parents('tr')).data(); //Retrieve row data
                    var tr = $(this).closest('tr'); //Find DataTables table row
                    var theRowObject = table.row(tr); //Get DataTables row object

                    $('#modifyAddressDialog').modal("show");

                    fillOutModifyDialog(data, theRowObject);
                }
            });

To send back the modified row data to the DataTables,

table.row(theRowObject).data(myModifiedDataObject).draw(false);