使用Ajax請求創建帶有嵌套表的新行

我試圖創建與此類似的功能：http://www.datatables.net/release-datatables/examples/api/row_details.html。使用Ajax請求創建帶有嵌套表的新行

與我的代碼唯一的主要區別是，我試圖通過Ajax獲取數據，它不起作用！

Ajax請求本身是成功的，我可以在響應中看到HTML代碼。

我的JS代碼：

/* Creata TableData 
--------------------------------------------*/ 
function fnFormatDetails (StreetVal, oTable, nTr) 
{ 
    var sOut = $.ajax({ 
     url: "ajax.php", 
     data: StreetVal, 
     success: function(data) { 

      console.log(data); 
      return data; 

     } 
    }); 

    return sOut; 
} 

$(document).ready(function(){ 


    $('.table-data tbody tr td a').addClass('closed'); 

    var oTable = $('.table-data').dataTable({ 
     "sPaginationType": "full_numbers", 
     "bStateSave": false, 
     "bRetrieve": true 
    }); 

    $('.table-data tbody tr td a').live('click', function (event) { 

     var StreetVal = $(this).attr('href').split('#')[1]; 
     var nTr = this.parentNode.parentNode; 

     if($(this).hasClass('closed')) { 

      $(this).removeClass('closed').addClass('open').html(' - '); 
      oTable.fnOpen(nTr, fnFormatDetails(StreetVal, oTable, nTr), 'details'); 

     } else { 

      $(this).removeClass('open').addClass('closed').html(' + '); 
      oTable.fnClose(nTr); 
     } 

     return false; 


    }); 

});

的問題是，它拋出一個錯誤：在jquery.dataTables.js/V的1776線

Could not convert JavaScript argument arg 0 [nsIDOMHTMLTableCellElement.appendChild] [Break On This Error] nNewCell.appendChild(mHtml);

1.8.3.dev

問題是什麼？任何建議非常感謝。

來源

2011-11-21 Iladarsda

您可以通過3個論據這樣fnFormatDetails？該示例只顯示了兩個傳遞的參數，oTable和nTr。 –

@Greg Pettit - 爲什麼不呢？我認爲你可以儘可能多地傳球。你不能嗎？ – Iladarsda

我不知道，因此它爲什麼形成一個問題。但大概這個功能是按照你以規定的方式傳遞給它的。如果你任意地向其中添加新的東西，該函數可能不知道如何處理它。 –

實際上，返回「sOut.responseText」而不是fnFormatDetails中的sOut似乎工作。

來源

2011-11-23 10:39:42 Eugene

你能舉個例子嗎？ – Iladarsda

你是什麼意思的例子？我將fnFormatDetails函數的最後一行更改爲「return sOut.responseText;」它的工作。但在調試過程中我做到了，所以你必須爲jQuery Ajax調用添加async：false來查看它的工作情況。 – Eugene

我已更新測試文件'http：// seefeld.pl/test /' - 它不再通過錯誤，但也不顯示數據。這裏複製文件：'www.seefeld.pl/test/jQuery％20DataTables％20with％20hidden％20rows.zip' – Iladarsda

它看起來像nTr是一個JS節點，而不是一個Jquery元素。你可以嘗試設置NTR是這樣的：

var nTr = $(this).parent("tr")[0];

此外，嘗試把「異步：假」的Ajax請求調用函數之前，以確保其完成。

來源

2011-11-21 16:38:28 ZimSystem

不幸的是，這些改變的腳本返回相同的錯誤消息。 – Iladarsda

工作JS代碼：

function fnFormatDetails (StreetVal, oTable, nTr) 
{ 
    var sOut = $.ajax({ 
     url: "ajax.php", 
     async: false, // added 
     data: StreetVal, 
     success: function(data) { 
      return data;    
     } 
    }); 

    return sOut.responseText;/changed form `return sOut` 
}

來源

2011-11-23 12:57:57 Iladarsda

使用Ajax請求創建帶有嵌套表的新行

回答

相關問題