Динамическое заполнение DataTables.net DataTable JQuery Plugin

Я только что скачал DataTables, и этот плагин отлично выглядит! Однако у меня проблема с динамическим заполнением компонента DataTable плагина. Я могу заполнить таблицу, если у меня есть статические и «в» и «статические» и «в». Тем не менее я хотел бы динамически создавать и заполнять и сущности. Приведенный ниже код заменяет содержимое статической таблицы анализируемым содержимым XML при нажатии кнопки ввода. Любые идеи о том, как сделать это полностью динамичным? Я попытался добавить класс dataTable в свою таблицу $ ("table.display"). AddClass ("dataTable");Динамическое заполнение DataTables.net DataTable JQuery Plugin

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

DataTables имеют специальный 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

Если я правильно разбираюсь в вопросе построения таблицы, вы хотите использовать JSON в качестве формата данных. Ниже приведен пример для Server Side Processing, и вы можете установить опцию aAJaxDataSource, чтобы быть URL-адресом сервера для обработки всего потока данных, такого как самоподготовка таблицы при загрузке страницы, обновлениях и т. Д.

источник

2012-03-10 13:02:15 charlietfl

Я не могу использовать JSON, мой источник данных является конечной точкой веб-службы SOAP, поэтому мне приходится обрабатывать данные как XML – c12

конвертировать его на сервере – charlietfl

Динамическое заполнение DataTables.net DataTable JQuery Plugin

ответ

Смежные вопросы