Datatables.net add row not work

zoners

I use the composant jquery datatables.net.
I Create my table, but when I would like add row 'manually', The row is not added at the end of the table.
I try used "initComplete", I see all my field is complete and after the function initcomplete is call, I use table.row.add but I have always the error who is:
Error with oninitcomplete

-in javascript qjuery.datatables.js(line 2022):

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

-in console.log error:
Uncaught TypeError: Cannot read property 'nTr' of undefined

My code 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 data is:

    {"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"}]}

And my html code is:

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

Thanks for your help

allan

Per the forum rules, please link to a test case showing the issue so it can be debugged.

Also, your JSON return does not meet the server-side processing requirements. Specifically, draw cannot be null.

Allan