數據表嵌套（相關）行

現在大部分時間都處於這些狀態，並努力使任何示例正常工作。數據表嵌套（相關）行

使用Datatables.net。我們試圖實現的是嵌套相關表。即只需點擊加號，即可顯示更多信息。唯一的區別是我們需要使用ajax從數據庫中提取這些信息。 http://datatables.net/blog/Drill-down_rows

我們到目前爲止有： -

$("#IPLoader").show(); 
       var url = "/user/" + userid+ "/jqGetUser"; 
       var sImageUrl = "../../Images/General/"; 


       $.getJSON(url, null, function (data) { 
        $("#IPLoader").hide(); 
        oTable = $('#example').dataTable({ 
         "oLanguage": { 
          "sProcessing": "<img src='~/Images/General/AjaxLoader.gif'>" 
         }, 
         "bProcessing": true, 
         "bserverSide": true, 
         "bFilter": false, 
         "aaData": data.aaData, 
         "aoColumns": [ 
          { 
           "mDataProp": null, 
           "sClass": "control center", 
           "sDefaultContent": '<img src="' + sImageUrl + 'details_open.png' + '">' 
          }, 
          { "mDataProp": "UserID" }, 
          { "mDataProp": "UserFirstName" }, 
          { "mDataProp": "UserSurname" }, 
          { "mDataProp": "UserAge" } 
         ] 

        }); 

       });

這個偉大的工程，該表顯示爲應。

接下來的事情是，我們需要做的是檢測的加號

$(document).on('click','#example td.control',function() { 
         var nTr = this.parentNode; 
         var i = $.inArray(nTr, anOpen); 
         if (i === -1) { 
         $('img', this).attr('src', sImageUrl + "details_close.png"); 
         var oData = oTable.fnGetData(nTr); 
         var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details'); 

        getdate(oData.Prvsp_Refno); 
         $('div.innerDetails', nDetailsRow).slideDown(); 

         anOpen.push(nTr); 

        } 
        else { 

         $('img', this).attr('src', sImageUrl+"details_open.png"); 
         oTable.fnClose(nTr); 
         anOpen.splice(i, 1); 
        } 
       }); 



    function fnFormatDetails(oTable, nTr) { 
      sOut = 
        '<div class="container pull-right span12" style="margin-right: 145px;">' + 
         '<div class="detailTxn">' + 
          '<table id="DetailTrans">' + 
           '<thead>' + 
            '<tr class="tableHeader">' + 
             '<th> Date/Time</th>' + // Hide the columns 
             '<th>Details</th>' + 
            '</tr>' + 
           '</thead>' + 
           '<tbody></tbody>' + 
          '</table>' + 
         '</div>' + 
        '</div>'; 
      return sOut; 







      function getdate(userID) { 

      $.getJSON("/user/" + $("#id").val() + "/jqgetuseraddress/" + userID, null, function (data) { 
       $("#IPLoader").hide(); 
       oTable = $('#DetailTrans').dataTable({ 
        "oLanguage": { 
         "sProcessing": "<img src='~/Images/General/AjaxLoader.gif'>" 
        }, 
        "bProcessing": true, 
        "bserverSide": true, 
        "bFilter": false, 
        "bSort": false, 
        "bFilter": false, 
        "bPaginate": false, 
        "aaData": data.aaData, 
       }); 

      }); 
}

這似乎是第一個點擊工作的點擊，然後我們提出了「不能重新初始化數據表」哪即時通訊猜測這是由於它使用相同的ID爲數據表

我們是在正確的道路，還是有正確的方法來做到這一點？

來源

2014-02-19 Simon

OK，我們剛纔添加的

「bRetrieve」：真實，

，這一切似乎是正常工作，

仍然會很感激，如果有人可以確認這是否是正確的辦法？

來源

2014-02-19 14:47:22 Simon

數據表嵌套（相關）行

回答

相關問題