動態填充DataTables.net DataTable JQuery插件

我剛剛下載DataTables，這個插件看起來不錯！然而，我有一個動態填充插件的DataTable組件的問題。我可以填充表格，如果我有靜態的，靜態的和靜態的。然而，我想要動態構建和填充實體。下面的代碼在您點擊輸入按鈕時用靜態表格內容替換XML解析的內容。任何想法如何使這完全動態？我嘗試將dataTable類添加到我的表 $（「table.display」）。addClass（「dataTable」）;動態填充DataTables.net DataTable JQuery插件

的index.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <script type="text/javascript" src="index.js"></script> 
     <title>DataTables example</title> 
     <style type="text/css" title="currentStyle"> 
      @import "../../media/css/demo_page.css"; 
      @import "../../media/css/demo_table.css"; 
     </style> 
     <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script> 
     <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> 
     <script type="text/javascript" charset="utf-8"> 
      $(document).ready(function() { 
       $('#example').dataTable(); 
      }); 
     </script> 
    </head> 
    <body id="dt_example"> 
     <div id="container"> 
      <table class="query"> 
       <tr> 
        <td class="status"></td> 
       </tr> 
       <tr> 
        <td><input class="query defaultText" type="text" 
         title="Type SQL query here, then press 'Enter' to execute..."> 
        </td> 
       </tr> 
      </table> 
      <div class="full_width big"> 
       DataTables zero configuration example 
      </div>   
      <div id="demo"> 
      <table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%"> 
       <thead> 
        <tr> **//want to remove these** 
         <th>Rendering engine</th>//want to remove these 
         <th>Browser</th>//want to remove these 
         <th>Platform(s)</th>//want to remove these 
         <th>Engine version</th>//want to remove these 
         <th>CSS grade</th>//want to remove these 
        </tr> 
       </thead> 
       <tbody> 
        <tr class="odd gradeX">**//want to remove these** 
         <td>Trident</td>//want to remove these 
         <td>Internet 
          Explorer 4.0</td>//want to remove these 
         <td>Win 95+</td>//want to remove these 
         <td class="center"> 4</td>//want to remove these 
         <td class="center">X</td>//want to remove these 
        </tr> 
       </tbody> 
      </table> 
      </div> 
      <div class="spacer"></div> 
      </div> 
     </div> 
    </body> 
</html>

index.js：

$(function() { 
$("input.query").keyup(function (e) { 
     // check if ENTER key was pressed 
     if (e.keyCode == "13") { 
      var data = '<ns1:executeResponse xmlns:ns1="http://sqlws.test.com">' + 
          '<ns1:return>' + 
           '<results>' + 
           '<row><deviceid>deviceid1</deviceid><domain>1</domain><role>manager</role><usage>100</usage></row>' + 
           '<row><deviceid>deviceid2</deviceid><domain>1</domain><role>director</role><usage>100</usage></row>' + 
           '</results>' + 
          '</ns1:return>' + 
         '</ns1:executeResponse>'; 

      var $xmlDoc = $($.parseXML(data)); 

      var $txt = $xmlDoc.find('ns1\\:return'); 

      var $firstrow = $txt.children("results").children(":first"); 

      var row; 
      $("table.display thead").empty(); 
        $("table.display tbody").empty(); 

      $("table.display").addClass("dataTable"); 

      row = $("<tr/>"); 
      row.append($("<th/>").text("#")); 

      $firstrow.children().each(function(){ 
       row.append($("<th/>").text(this.nodeName)); 
      }); 

      row.appendTo($("table.display thead")); 

      var ndx = 0; 
      $txt.children("results").children().each(function() { 
       row = $("<tr class='odd gradeX'/>"); 
       row.append($("<td/>").text(ndx + 1)); 
       $(this).children().each(function() { 
        row.append($("<td/>").text($(this).text())); 
        row.appendTo($("table.display tbody")); 
       }); 
       ndx++; 
      }); 

      if (ndx == 0) { 
       // no rows returned 
       $("table.display thead").empty(); 
       $("table.display tbody").empty(); 
      } 
     } 
    }); 
});

來源

2012-03-10 c12

數據表有特殊的API在運行時數據添加到表：

t.fnClearTable(); 
t.fnAddData(data);

哪裏data是一個數組的數組與表中的數據，按行上市：

[[r1c1, r1c2, …, r1cn], 
    … 
[rmc1, rmc2, …, rmcn]]

這裏，n是你列數和m是您要添加的行數。您可以使用您想要的任何數據構建data，然後使用fnAddData()方法將其推送到數據表。

來源

2012-03-10 09:06:23

如何添加到thead vs tbody？ – c12 2012-03-10 17:01:12

如果我正在理解關於動態構建表的問題，那麼您將需要使用JSON作爲數據格式。以Server Side Processing爲例，您可以將aAJaxDataSource選項設置爲服務器上的一個url，以處理所有數據流，例如在頁面加載，更新等時創建自我表格。

來源

2012-03-10 13:02:15 charlietfl

我無法使用JSON，我的數據源是一個SOAP Web服務端點，所以我必須將數據作爲XML處理 – c12 2012-03-10 17:10:02

將其轉換爲服務器 – charlietfl 2012-03-10 17:12:40

動態填充DataTables.net DataTable JQuery插件

回答

相關問題