Datatables.net 添加行无效

Question

我用的是作文jquerydatatables.net。我创建了 table，但是当我想添加行 'manually' 时，该行未添加到 table 的末尾。我看到在添加 table 行后，我在 Render 'Email' 中的 console.log(data) 显示“123”，但未添加该行。

我的代码javascript:

$(document).ready(function () {
    var $select = $('<select id="selectoption"></select>');
    var $checkbox = $('<div class="container"></div>');
    var $input = $('<input type="text">');
    var $span = $('<span></span>');
    var table = $('#griduser').DataTable({
        "processing": true,
        "serverSide": true,
        "dom": '<"toolbar">frtip',
        "ajax": {
            "url": "/User/ReadUserTest/",
            "dataType": "json"
        },
        columns: [
            {"data": "Delete"},
            {"data": "Id",
                render: function (data, type, row, meta) {
                    var $clone = $span.clone();
                    $clone.attr("id", "userid");
                    $clone.append('<label>' + data + '</label>');
                    return $clone.wrap('<span></span>').parent().html();
                }
            },
            {"data": "UserName",
                render: function (data, type, row, meta) {
                    var $clone = $input.clone();
                    $clone.attr("id", "userid");
                    $clone.attr('value', data);
                    return $clone.wrap('<div></div>').parent().html();
                }
            },
            {"data": "Login",
                render: function (data, type, row, meta) {
                    console.log(data);
                    var $clone = $input.clone();
                    $clone.attr("id", "userlogin");
                    $clone.attr('value', data);
                    $clone.val(data.Login);
                    return $clone.wrap('<div></div>').parent().html();
                }
            },
            {"data": "Email",
                render: function (data, type, row, meta) {
                    var $clone = $input.clone();
                    $clone.attr("id", "email");
                    $clone.attr('value', data);
                    $clone.val(data.Email);
                    return $clone.wrap('<div></div>').parent().html();
                }
            },
            {"data": "Save"}
        ]
        ,
        "columnDefs": [
            {"targets": -1,
                "data": null,
                "defaultContent": "<input type='image' id='saverole' src='/images/save.png' alt='Submit' width='48' height='48'>"
            },
            {"targets": 0,
                "data": null,
                "defaultContent": "<input type='image' id='saverole' src='/images/remove.png' alt='Submit' width='48' height='48'>"
            }
        ],
        "initComplete": function (settings, json) {
            table.row.add({
                Delete: 'delete123', Id: 'id123', UserName: 'name123', Login: 'login123', Email: 'email123', Save: 'save123'
            }).draw();                
        },
    });
});

Json数据为：

{"sEcho":null,"iTotalRecords":2,"iTotalDisplayRecords":2,"aaData":    
[{"Id":"09b90bca-7bf5-4956-91c9- 0d7cee180ba5","UserName":"nouveau@test.com","Login":"nouveau@test.com","Email":" nouveau@test.com"},
{"Id":"86f9eabd-ec1e-40b1-af5b- fea899d4c1c0","UserName":"nouveautest@test.com","Login":"nouveautest@test.com"," Email":"nouveautest@test.com"}]}

我的 html 代码是：

<table id="griduser" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Id</th>
            <th>Nom</th>
            <th>Login</th>
            <th>Email</th>
            <th></th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th></th>
            <th>Id</th>
            <th>Nom</th>
            <th>Login</th>
            <th>Email</th>
            <th></th>
        </tr>
    </tfoot>
</table>

感谢您的帮助

更新：

oninitcomplete 错误：

-in javascript qjuery.datatables.js（第 2022 行）：

var aoData = oSettings.aoData[ iDataIndex ];
if ( aoData.nTr === null )
{
_fnCreateTr( oSettings, iDataIndex );
}

-in console.log 错误：未捕获的类型错误：无法读取未定义的属性 'nTr'

Answer 1

添加函数在参数中使用列表而不是字典，使用

 table.row.add([
        'Login Value','Email Value','Id Value', 'Save Value', 'UserName Value'
    ]
     ).draw();

使用该方法，值需要与 table 列的顺序相同。此示例假设您的 table 如下所示：

__________________________________________________
|--login--|--email--|--id--|--save--|--username--|

编辑

使用 html 代码，我可以看到你有 6 列，当你添加行时，你应该为每一列定义一个值，如下所示：

table.row.add([
    "", "09b90bca-7bf5-4956-91c9- 0d7cee180ba5", "nouveau@test.com", "nouveau@test.com", "nouveau@test.com", ""
]
 ).draw();

Answer 2

添加一个对象/文字作为这个

table.row.add({
   Login: '123', Email: '123', Id: '123', Save: '123', UserName: '123'
}).draw();

是正确的如果您已经在 columns 中定义了正确的 data 绑定，就像您在上面所做的那样。但是，您必须至少要在要插入的对象中具有与您在columns 中定义的相同的属性。 dataTables 将查找对象中的每个 data 绑定，如果缺少某些属性，则无法插入。对象中缺少 Delete：

table.row.add({
   Delete: 'something', Login: '123', Email: '123', Id: '123', Save: '123', UserName: '123'
}).draw();

应该可以。

Datatables.net 添加行无效

Datatables.net add row not work

jquery

datatables

jquery-datatables

datatables-1.10