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

-1

我有一个数据数组，其中每个元素都是一个字典。像这样：使用ajax从服务器获取数据并将其放入数据表中

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代码行

任何帮助，将不胜感激

来源

2013-01-01 Zeinab Abbasimazar

我已经解决了这个问题我不回来从服务器数据我只是删除了一些行，并重新绘制使用新节点作为aaData和aColumns的表BTW 我实际上设置bDestroy为真为服务器端进程重绘，我使用一些隐藏的输入并发送删除的元素的ID 代码行在这里这是ajax代码：

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

这是重绘表的代码：

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

：

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 所以我通过检索该之后，我使用fnRowCallback实际执行两项任务：使用一些图片元素创建一个良好的用户界面。它通过使用完成

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

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

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

;-)

完成

来源

2013-01-07 08:44:40

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

回答

相关问题