使用 DataTable() 更新一行答案

【问题标题】：Update a row using DataTable()使用 DataTable() 更新一行
【发布时间】：2015-06-08 13:05:59
【问题描述】：

我想知道使用新 API 更新/重绘表格行的正确方法。 Old questions 建议 table.fnUpdate。我还应该为此使用旧 API 吗？

new API 没有告诉我有关更新行的任何信息。

提前致谢！

【问题讨论】：

你试过了吗：$(".dataTable").dataTable().row( index|selector ).draw()？
我认为如果新 API 没有更新，并且您可以使用旧方法，我会使用旧方法。
我认为可以！采取look at this。
@LShetty 哦，谢谢。猜我看data下面没有意义...

标签： javascript jquery datatables

【解决方案1】：

我最近遇到了类似的问题。我相信 row().data() 是你要找的https://datatables.net/reference/api/row%28%29.data%28%29

例如：

table.row( 0 ).data( newData ).draw();

或者，您可以使用 row().invalidate() https://datatables.net/reference/api/row%28%29.invalidate%28%29

var initialData = [new Data(), new Data()];
var table = $('#foo').Datatable({
  data: initialData
});
initialData[0].bar = 5;
table.row(0).invalidate().draw();

如果您从外部数据源获取数据，这将更加有用。

【讨论】：

追问：你知道如何让它触发桌上已有的createdRow事件吗？
createdRow 在行创建时被调用，就是这样。如果您在数据表源中进行深入搜索，可能有一种方法可以触发它，但我认为更好的方法是使用 columnDefs。例如，查看此处的示例：datatables.net/examples/advanced_init/column_render.html。您可以设置每次更新表格时都会调用的渲染函数。
感谢您的建议。当render 被触发时，你介意给我看一个例子吗？在我的测试中它永远不会触发......
嗯，看来我必须设置 targets 才能触发它。

【解决方案2】：

$(document).ready(function () {
    $('#dataTable').on('click', '.update', function () {
        var pageParamTable = $('#dataTable').DataTable();
        var tableRow = pageParamTable.row($(this).parents('tr'));
        var rData = [
            yourdata1,
            yourdata2,
            '<a href="#" data-href="1" class="update">Update</a>',
            '<a href="#" data-href="2" class="delete">Delete</a>'
        ];
        pageParamTable
                .row( tableRow )
                .data(rData)
                .draw();
    });
});

我们正在使用这个代码我们的项目你可以使用这个。

【讨论】：

我收到错误datatable.js:430 Uncaught TypeError: Cannot set property '_aData' of undefined at D.<anonymous> (datatable.js:430) at D.data (datatable.js:371) at HTMLButtonElement.<anonymous> (form1_datatable.html:194) at HTMLButtonElement.dispatch (jquery.min.js:2) at HTMLButtonElement.v.handle (jquery.min.js:2)
我还为此添加了一个新的question

【解决方案3】：

如果您使用 Datatable 方法为您的行设置了特定的 id 属性，然后你可以选择：

table.row('#row_'+ idRow).data(rowData).draw()

因为id属性的生成必须是这样才能被after选择的：

前 id 3：

   // In php : push the key 'DT_RowId' foreach row  
      foreach ($items as $item) {
           $item['DT_RowId'] = 'row_' . $id;
      }

在您拥有特定 ID 后，您可以轻松选择更新：

 <tr id="row_3" class="...">
    ....
    </tr>

【讨论】：

【解决方案4】：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Datatable</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
</head>
<body>
    <div>
        <h1>Data</h1>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleDataModal" id="addDataButton">
            Add Random Data to Table
        </button>
        <div style="padding:20px 5px;">
            <table id="example" class="table table-striped table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Sakura Yamamoto</td>
                        <td>Support Engineer</td>
                        <td>Tokyo</td>
                        <td>37</td>
                        <td>2009/08/19</td>
                        <td>$139,575</td>
                        <td>
                            <button type="button" class="btn btn-primary update" data-id="0">
                                Update
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>Thor Walton</td>
                        <td>Developer</td>
                        <td>New York</td>
                        <td>61</td>
                        <td>2013/08/11</td>
                        <td>$98,540</td>
                        <td>
                            <button type="button" class="btn btn-primary update" data-id="1">
                                Update
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div> 
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
    <script>
        var counter = 1;
$( document ).ready(function() {
    
        $('#addDataButton').on('click', function () {
                
            $('#example').DataTable().row.add( [
                'Juuso Temminen '+counter,
                'FrontEnd Engineer '+counter,
                'Riga ' +counter,
                '371 ' +counter ,
                '2021/3/3' +counter,
                '$123,23',
                '<button type="button" class="btn btn-primary update" data-id="'+$('#example').DataTable().rows().count()+'">Update</button>'
            ] ).draw( false );
            counter++;

        });
        
        
        $('.table tr .update').click(function(){
            const id = $(this).attr("data-id");
            var temp = $('#example').DataTable().row(id).data();
            temp[0] = 'Updated Datatable column '+ counter;
            $('#example').DataTable().row(id).data( temp ).draw(false);
            counter++;
        });
    });

    </script>
</body>
</html>

Datatable 有新的变化我试图为你创建一个演示页面它在本地工作我添加了插入和更新示例；基本上，我试图从 Datatable 页面了解解决方案：https://datatables.net/examples/api/add_row.html

【讨论】：