Question

我使用composant jquery datatables.net。我创建了我的表，但是当我想“手动”添加行时，该行的末尾不会添加该行。我看到在添加表格行之后，我在渲染'电子邮件'中的console.log（数据）显示'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错误：未捕获的TypeError：无法读取未定义的属性“nTr”

Answer 1

添加对象/文字作为

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

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

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

应该有用。

Answer 2

add funtion在参数而不是字典中使用列表，使用

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

使用该方法，值必须与表列的顺序相同。这个例子假设你的表看起来像这样：

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

Datatables.net添加行不起作用

2 个答案: