-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'}]

我的网页中有一个数据表，对于每一行，都有一个删除选项，当用户删除某些行时，也会对服务器进行 ajax 调用以从列表中删除该项目。但是在表格中显示新数据时存在问题。表不承认它应该再次初始化。例如我用

{{ forloop.counter }}

用于显示行号，如果我删除某些行，数字列不会刷新并且仍然有旧数字。所以我不能再使用行号来删除行，因为它们不在范围内。我想知道我是否将新数据提供给 dataTable。但我不知道如何响应 ajax 调用。我也一直在尝试重绘数据表，但没有奏效。

顺便说一句，我使用 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);

我使用元素的 ID 作为每行中第五个 TD 的 ID，所以我通过以下方式检索：

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

之后我使用 fnRowCallback 实际做了两个任务： 1- 使用一些图片元素来创建一个好的用户界面。它是通过使用完成的

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

2- 再次设置第五个 TD 的 ID 以供进一步使用。它是通过使用完成的

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

;-)

于 2013-01-07T08:44:40.630 回答