在ajax成功时使用jquery更新数据表单元格

Question

想在 ajax 成功后更新数据表单元格。 最初，我的表格对于每一行都有一个共享按钮，当用户单击共享按钮时，它应该变成标签，即我想用 html 内容更新单元格内容。我也动态获得了行号，但无法通过更新数据。数据表.cell().data().draw()。 有人可以建议无错误的方法来解决这个问题。 HTML 代码

<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代码

$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 代码/

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

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

你可以做一些这样的事情来更新特定的行

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