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

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

AmitawinashAmitawinash Posts: 2Questions: 1Answers: 0

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.

Answers

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736

    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

  • AmitawinashAmitawinash Posts: 2Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736
    edited January 2018

    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

  • AstroniklasAstroniklas Posts: 2Questions: 0Answers: 0
    edited January 2019

    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);
    
    
This discussion has been closed.