Jquery DataTables - 根据行 ID 更改特定单元格中的数据答案

【问题标题】：Jquery DataTables - Change Data in Specific Cell Based on Row IDJquery DataTables - 根据行 ID 更改特定单元格中的数据
【发布时间】：2017-06-20 05:01:20
【问题描述】：

我正在尝试通过转到特定的表行 ID 来更改我的 Jquery DataTable 中第 5 列的表数据。默认情况下，我所有的表行的 id 都是row<id number>。例如：

<tr id="row147">
  <td>147</td>
  ...

为了尝试更改特定的表格数据单元格，我尝试了类似的方法

table.row("#row" + data.job_id).data(variable).draw()

但这会将数据写入每个表格数据单元格中的整行。如何在行中指定表格数据单元格并使用 DataTables API 将其写入其中？

【问题讨论】：

我试过table.row(row).column(5).data(variable).draw()，虽然它没有抛出任何错误，但它没有更新该列中的单元格。
忽略评论...

标签： jquery datatables

【解决方案1】：

您的代码应如下所示。添加initComplete：

$(document).ready(function () {
    $("#uiDataTable").DataTable({
        "order": [[1, "asc"]],
        "pagingType": "full",
        "deferRender": true,
        "initComplete": function (settings, json) {
            $('tbody tr').each(function () {
                var nTds = $('td', this);
                var nTrs = $('tr', this);
                //row #  
                if (nTrs.context.id == "4") {
                    $(nTds[0]).text("Changing row 3 column 1");
                    //alert(sBrowser);
                }
            });
        }
    });
});

【讨论】：

有没有办法通过 API 完成我的要求？ initComplete 是一个选项..

【解决方案2】：

如果您通读 row-selector 上的文档，这是可能的你会注意到它说：

还有可选的 cells() 和 cell()) 方法提供从表格中选择行的能力

所以如果你去cell docs：

你会看到重载的单元格方法：

cell( rowSelector, columnSelector, [ modifier ] )

对于您的情况：

table.cell("#row" + data.job_id,'').data(variable).draw()

table.cell("#row" + data.job_id, column_index).data(variable).draw()

【讨论】：

【解决方案3】：

我最终通过关注此帖子 here 找到了解决方案。基本上必须给每个<td> 一个ID。然后我可以使用table.cell('#td_5_' + data.job_id).data(variable) 将新数据写入特定单元格。

【讨论】：

【解决方案4】：

datatables 的 cell 方法在您更改顺序时将不起作用，因为 rowIndex 是加载行的顺序，而不是当前显示的顺序，如 here 。如果您希望它基于表中的当前位置，使用 jQuery 使用行索引可能是最简单的 -

$('#yourTableId tbody tr:eq(rowIndex) td:eq(columnIndex)').text('yourvalue');

【讨论】：

【解决方案5】：

var rowId = "row" + data.job_id;
var element = document.getElementById(rowId).cells;
element[index_of_column].innerHTML = "New content";`

【讨论】：

我应该重新表述我关于如何通过 DataTables API 完成的问题。

【解决方案6】：

$('#'+table).find('tr#'+rowId).find('td:eq(colNum)').html(newValue);

【讨论】：

您的答案被标记为低质量，因为它缺乏解释。扩展您的答案，使其不会被删除。