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',
        });

Answer 1

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();