數據表中的JQuery選項卡不工作

我正在爲我的應用程序實現數據表。我使用數據表擴展行。在每一行內我想實現tabs.I通過腳本添加選項卡。但它不起作用。數據表中的JQuery選項卡不工作

我的代碼，

 <script type="text/javascript" charset="utf-8">   
     $(function() { 
      $("#tabs").tabs(); 
     }); 


     function fnFormatDetails (oTable, nTr) 
     { 
      var aData = oTable.fnGetData(nTr); 
      var sOut = '<div class="demo">'; 
      sOut += '<div id="tabs" style="padding-left:10px; background-color:white !important; border:0px !important;">'; 
      sOut += '<ui>'; 
      sOut += '<li><a href="#tabs-1">Details</a></li>'; 
      sOut += '<li><a href="#tabs-2">History</a></li>'; 
      sOut += '</ui>'; 
      sOut += '<div id="tabs-1">'; 
      sOut += '<p><div style="color:#8e8d8d; width: 40%; float: left;">Rendering engine </div><div style="color:#292828; width: 60%; float: left;">:&nbsp;'+aData[1]+' '+aData[4]+' </div></p>'; 
      sOut += '<p><div style="color:#8e8d8d; width: 40%; float: left;">Link to source</div><div style="color:#292828; width: 60%; float: left;">:&nbsp;Could provide a link here</div></p>'; 
      sOut += '<p><div style="color:#8e8d8d; width: 40%; float: left;">Extra info</div><div style="color:#292828; width: 60%; float: left;">:&nbsp;And any further details here</div>&nbsp;</p>'; 
      sOut += '</div>'; 
      sOut += '<div id="tabs-2">'; 
      sOut += '<p>Data in 2nd tab</p>'; 
      sOut += '</div>'; 
      sOut += '</div>'; 
      sOut += '</div>'; 

      return sOut; 
     }   
     $(document).ready(function() { 

      $("#dt_example tbody tr").click(function(e) { 
      var nTr = $(this).parents('tr')[0]; 
       if ($(this).hasClass('row_selected')) { 
        $(this).removeClass('row_selected'); 

        $('img', this).attr('src', 'datatable/images/details_open.png');      

        oTable.fnClose(nTr); 


       } 
       else { 

        $(this).addClass('row_selected'); 


        $('img', this).attr('src', 'datatable/images/details_close.png'); 

        oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details'); 

       } 
      }); 

      var nCloneTh = document.createElement('th'); 
      var nCloneTd = document.createElement('td'); 
      nCloneTd.innerHTML = '<img src="datatable/images/details_open.png">'; 
      nCloneTd.className = "center"; 

      $('#example thead tr').each(function() { 
       this.insertBefore(nCloneTh, this.childNodes[0]); 
      }); 

      $('#example tbody tr').each(function() { 
       this.insertBefore( nCloneTd.cloneNode(true), this.childNodes[0]); 
      }); 

      var oTable = $('#example').dataTable({ 
       "bJQueryUI": true, 
       "bSort": false, 
       "sPaginationType": "full_numbers", 
       "sDom": 'T<"clear">lfrtip' 

      }); 

      $('#example tbody td').live('click', function() { 
       var nTr = $(this).parents('tr')[0]; 


       if (oTable.fnIsOpen(nTr)) 
       { 

        $('img', this).attr('src', 'datatable/images/details_open.png');      

        oTable.fnClose(nTr); 
       } 
       else 
       { 

        $('img', this).attr('src', 'datatable/images/details_close.png'); 

        oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details'); 
       } 
      }); 

     }); 
    </script>

這有什麼錯我的代碼？

請幫助，

感謝

來源

2012-09-17 Erma Isabel

其他任何我們可以看到現場代碼的方式？所以我們可以測試它，看看到底是什麼問題？ –

@Mahan k ...我會發送鏈接 –

@Mahan這裏是鏈接... http：//efernssolutions.com/datatable_test/datatable.html –

確定我得到了它。問題是jquery問題在選擇元素時有問題，因爲數據具有相似的id。

你需要爲此使用服務器端語言。您必須使用服務器端語言創建選項卡的DOM，以便創建動態ID並且不會相互衝突。

來源

2012-09-17 10:08:52

其實我不使用服務器端編程這裏只是jQuery和HTML。有沒有其他解決問題的方法？ –

好的另一個訣竅是通過JavaScript創建動態內容..與動態id也產生的JavaScript –

數據表中的JQuery選項卡不工作

回答

相關問題