Update datatable cell using jquery on ajax success

Question

Want to update the datatable cell, after ajax success. Initially my table has a share button, for each row, when the user clicks the share button then it should turn to lable i.e i want to update the cell content with html content. I have got the row number also dynamically, but not able to update the data via. Datatable.cell().data().draw(). Can someone suggest error free method, to solve this issue. HTML CODE

<table class="table table-striped" id="sharedFilesTable">
                                                <thead>
                                                    <tr>
                                                    <th>Sr.No</th>
                                                    <th>File Name</th>
                                                    <th>Date of creation</th>
                                                    <th>Date of updation</th>
                                                    <th>Download</th>
                                                    <th>
                                                    <!-- <input type="checkbox" class='sharecheckall' id='sharecheckall'>
                                                    <input type="button" id='share_record' class="btn btn-warning btn-sm b" value='Share' > -->
                                                    Share
                                                    </th>
                                                    <th>
                                                    <input type="checkbox" class='deletecheckall' id='deletecheckall'>
                                                    <input type="button" id='delete_record' class="btn btn-danger btn-sm b" value='Delete' >
                                                    </th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>

PHP code for row data in datatable

$sub_array['sr_no'] = ++$i;
                    $sub_array['file_name'] = $rows->name;
                    $sub_array['doc'] = $rows->created_at;
                    $sub_array['dou'] = $rows->updated_at;
                    $sub_array['dl'] = '';
                    $sub_array['share'] = '<button class="btn btn-warning btn-group-sm" id="share" value="'.$rows->id.'">Share</button>';
                    $sub_array['delete'] = "<input type='checkbox' class='delete_check' id='delcheck_".$rows->id."' onclick='deletecheckbox();' value='".$rows->id."'>";

/JS Code/

var row = rownum - 1;
                         ///alert('#sharedFilesTable tbody tr:eq('+row+')');
                         //console.log(data_table['share']);
                         var tr = $('#sharedFilesTable tbody tr:eq('+row+')');
                         var row_data = dataTable.row(tr).data();
                         //console.log(row_data);
                         row_data['share'] = "<label class='text-success'>Shared</label>";
                         dataTable.row(tr).data(row_data).draw(); 
                        //alert(row_data.share);
                        dataTable.ajax.reload()

Initilization of datatable in JS

dataTable = $('#sharedFilesTable').DataTable({
          'processing': true,
          'serverSide': true,
          'serverMethod': 'post',
          'ajax': {
              url: 'tpo/tpoDetails/getFiles',
              data: function(data){
                  // Read values
                  data.request = 1,
                  data.name = name
              }
          },
          'columns': [
            { data: 'sr_no'},
            { data: 'file_name' },
            { data: 'doc' },
            { data: 'dou' },          
            { data: 'dl' },
            { data: 'share' },
            { data: 'delete'}
        ],
          'columnDefs': [ {
              'targets': [], // column index (start from 0)
              'orderable': false,  // set orderable false for selected columns
          }],
          "rowCallback": function( row, data, index ) {
            //alert(data.file_name);
            $('td:eq(4)', row).html( '<a class="text-primary" href="http://localhost/ci/uploaded/'+name+'/sharedFiles/'+data.file_name+'" target="_blank">Download</a>');
          }
          //'dom': 'Bfrtip',
        });

You can dynamically create the table and then embed it into a `
` after an successfull `ajax` call — hiFI, Mar 02 '20 at 05:53

durairajaa · Accepted Answer · 2020-03-02T03:38:56.353

0

you can do some thing like this to update a particular row

let table = $(tableSelector).DataTable();
let tr = $(rowSelector);
let row_data = table.row(tr).data()

row_data["share"] = "the lable text" //new data for the cell to update

table
    .row(tr)
    .data(row_data)
    .draw()
    .invalidate();

edited Mar 02 '20 at 03:38

answered Mar 01 '20 at 17:03

durairajaa

131
1
9

what is row in the row(row)? – mohan Mar 01 '20 at 17:18
$("#sharedFilesTable").dataTable().find("tbody").on('click', 'tr', function () { rownum = this.rowIndex; }); /*Using this code i got the row number on which the event was performed, then used the 4th and 5th line of your code*/ – mohan Mar 02 '20 at 06:01
In second line of your code your getting the row selector, which in my case its class which is just "odd" and "even", because i am letting the datatable to output my every record. – mohan Mar 02 '20 at 06:10
There is a considerable difference between dataTable() and DataTable() as explained in this link [link](https://stackoverflow.com/questions/25207147/datatable-vs-datatable-why-is-there-a-difference-and-how-do-i-make-them-w), make sure your version of datatables supports the suggested api calls – durairajaa Mar 02 '20 at 17:10
if you post code it will be much easier to figure out what is going wrong – durairajaa Mar 02 '20 at 17:14
Yes lable is being showed just for a seconds and button is appearing again. – mohan Mar 05 '20 at 18:30
What i want to achieve is replacing the button in first image with shared lable shown in the second msg. – mohan Mar 05 '20 at 19:05
The reason for label appearing only for few seconds is dataTable.ajax.reload(). when you change the row data using dataTable.row(tr).data(row_data).draw();, Label will be rendered (it will be visible to you) but you are not stopping there; you are using dataTable.ajax.reload() which fetches data from server and re renders the table with the data from the server. you should remove the dataTable.ajax.reload() call – durairajaa Mar 05 '20 at 19:49

Update datatable cell using jquery on ajax success

1 Answers1