중첩 된 (관련) 행

현재 대부분의 시간 동안이 작업을 수행하여 올바르게 작동하는 샘플을 얻으려고 애 쓰고 있습니다.중첩 된 (관련) 행

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

확인, 우리는

"bRetrieve"에 추가 방법?

출처

2014-02-19 14:47:22 Simon

중첩 된 (관련) 행

답변

관련 문제