-1

各要素が辞書であるデータの配列があります。このような：

list = [{'id': '1', 'name':'first', 'type': 'item', 'status': 'ok'},
        {'id': '2', 'name':'second', 'type': 'item', 'status': 'ok'},
        {'id': '3', 'name':'third', 'type': 'kit', 'status': 'ok'}]

WebページにdataTableがあり、行ごとに削除するオプションがあります。ユーザーが行を削除すると、サーバーへのajax呼び出しがあり、リストからアイテムも削除されます。ただし、テーブルに新しいデータを表示する際に問題があります。テーブルは、再度初期化する必要があることを認識しません。たとえば、私は使用します

{{ forloop.counter }}

行番号を表示し、一部の行を削除しても、番号の列が更新されず、古い番号が残っています。そのため、行番号が範囲内にないため、行を削除するために行番号を使用できなくなりました。dataTableに新しいデータを与えるかどうか疑問に思いました。しかし、私はajax呼び出しに応答してそれを行う方法がわかりません。また、dataTableを再描画するために多くのことを試みてきましたが、機能しませんでした。

ところで、私はdjangoとpythonを使用していますが、aspまたはphpのコード行は使用したくありません

助けていただければ幸いです

4

1 に答える 1

0

私はサーバーからデータを取り戻さないという問題を解決しました私はいくつかの行を削除し、aaDataとaoColumnsとして新しいノードを使用してテーブルを再描画しますところで私は実際にサーバー側プロセスの再描画のためにbDestroyをtrueに設定しました、私はいくつかの隠された入力を使用します削除された要素のIDコード行を送信します。これはajaxコードです。

var required_data = {deleted_nodes:tr_id};
$.ajax({
    type:"POST",
    cache:false,
    url:$('#items_form').attr('action'),
    data:required_data,
    success:function () {
    }
});

これは、テーブルを再描画するためのコードです。

var table = $('#itemsTable').dataTable({"bRetrieve":true});
var nodes = table.fnGetNodes();
table.fnDeleteRow(nodes[parseInt(tr_number) - 1], null, true);
nodes = table.fnGetNodes();
var data = [];
for (var i = 0; i < nodes.length; i++) {
    data.push(
            {
                count:(i + 1).toString(),
                name:nodes[i].cells[1].innerHTML,
                type:nodes[i].cells[2].innerHTML,
                specialName:nodes[i].cells[3].innerHTML,
                status:nodes[i].cells[4].innerHTML,
                manage:nodes[i].cells[5].attributes['id']
            }
    );
}
var oSettings = {
    "aaData":data,
    "aoColumns":[
        {"sTitle":"number", "mDataProp":"count", "style":"width:10px;"},
        {"sTitle":"name", "mDataProp":"name", "style":"width:50px;"},
        {"sTitle":"type", "mDataProp":"type", "style":"width:50px;"},
        {"sTitle":"special name", "mDataProp":"specialName", "style":"width:50px;"},
        {"sTitle":"status", "mDataProp":"status", "style":"width:50px;"},
        {"sTitle":"management", "mDataProp":"manage", "style":"width:25px; text-align: center;"}
    ],
    "sScrollY":"500px",
    "bPaginate":false,
    "bScrollCollapse":true,
    "bFilter":false,
    "bDestroy":true,
    "fnRowCallback":function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        var str = '<span><img src="' + 'error.png' +
                '" name="delete"' + ' style="width:20px;height:20px;cursor:pointer" ' +
                'onclick="' + "delete_item('" + aData.count + "', '" + aData.manage.value + "');" +
                '" class="small-icon"' + ' title="delete this" /></span>' +
                '<span><img src="' + 'warning.png' +
                '" name="edit"' + ' style="width:20px;height:20px;cursor:pointer" ' +
                'onclick="' + "report_problem('" + aData.count + "', '" + aData.manage.value + "', '" + aData.type + "');" +
                '" class="small-icon"' + ' title="edit this" /></span>';
        $('td:eq(5)', nRow).html(str);
        $('td:eq(5)', nRow)[0].setAttribute('id', aData.manage.value);
    }
};
table.dataTable('#itemsTable', oSettings);

各行の5番目のTDのIDとして要素のIDを使用したので、次の方法でこれを取得します。

manage:nodes[i].cells[5].attributes['id']

その後、fnRowCallbackを使用して、実際に2つのタスクを実行します。1-優れたユーザーインターフェイスを作成するためにいくつかの画像要素を使用します。それは使用することによって達成されます

$('td:eq(5)', nRow).html(str);

2-さらに使用するために5番目のTDのIDを再度設定します。それは使用することによって達成されます

$('td:eq(5)', nRow)[0].setAttribute('id', aData.manage.value);

;-)

于 2013-01-07T08:44:40.630 に答える