使用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從服務器獲取數據並將其放入數據表中

回答

相關問題