1
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：
t.fnClearTable();
t.fnAddData(data);
：
$(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();
}
}
});
});
tbadにどのように追加すればよいですか？ – c12