Question

我有一个数据数组，其中每个元素都是一个字典。像这样：

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

我的网页上有一个dataTable，每行都有一个删除选项，当用户删除某行时，对服务器进行ajax调用以从列表中删除该项。但是在表格中显示新数据时出现问题。表格没有认识到它应该再次初始化。例如，我使用

{{ forloop.counter }}

用于显示行号，如果删除某行，则数字列不会刷新，但仍有旧数字。所以我不能再使用行号来删除行，因为它们不在范围内。我想知道我是否向dataTable提供新数据。但我不知道如何回应ajax电话。我也一直在努力重绘dataTable，但它没有用。

BTW我使用django和python，我不想使用asp或php代码行

任何帮助将不胜感激

Answer 1

我已经解决了这个问题我没有从服务器获取数据我只是删除一些行，并使用新节点作为aaData和aoColumns BTW重绘表我实际上将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);

- ）

使用ajax从服务器获取数据并将其放入数据表中

1 个答案: