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

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

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

{{ forloop.counter }}

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

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

;-)