0

Composant jquery datatables.net を使用します。テーブルを作成しましたが、「手動で」行を追加したい場合、テーブルの最後に行が追加されません。テーブル行を追加した後、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 のエラー:

-javascript qjuery.datatables.js(2022行目):

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

-console.log エラー: Uncaught TypeError: 未定義のプロパティ 'nTr' を読み取れません

4

2 に答える 2

2

このようにオブジェクト/リテラル​​を追加する

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

上記で実際に行ったように、 で適切なバインディングを定義した場合は正しいです。ただし、挿入しようとしているオブジェクトには、 で定義したものと少なくとも同じプロパティが必要です。dataTables はオブジェクト内の各バインディングを検索し、一部のプロパティが欠落している場合は挿入に失敗します。がオブジェクトにありません:datacolumnscolumnsdataDelete

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

動作するはずです。

于 2015-06-01T20:00:13.857 に答える