Javascript 如何将数据表与动态创建的表一起使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14891216/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to use datatable with dynamically created table
提问by Gaurav Arya
I have a jsp which onload calls a js in which a table is created dynamically. The situation is that I have never worked on jquery earlier, all I know is javascript.
我有一个 jsp，它 onload 调用一个动态创建表的 js。情况是我以前从未使用过 jquery，我只知道 javascript。
I made two scenarios:
我做了两个场景：
case one : when I create static table on the jsp page itself it works flawlessly. case two : when I try to load the same table which is created by dynamic javascript it fails.
案例一：当我在 jsp 页面本身上创建静态表时，它可以完美地工作。情况二：当我尝试加载由动态 javascript 创建的同一个表时，它失败了。
Case I Working code
案例一 工作代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/createDynamicTable.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('#testTable').dataTable();
});
</script>
</head>
<body>
<div id="tableDataDiv">
<table id="testTable">
<thead>
<th>h1</th>
<th>h2</th>
<th>h3</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Case II Not Working code
案例二不工作代码
jsp code
代码
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/createDynamicTable.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('#testTable').dataTable();
});
</script>
</head>
<body onload="getTableData();">
<div id="tableDataDiv">
</div>
</body>
</html>
js code
function getTableData(){
var tableDataDivObj = document.getElementById("tableDataDiv");
var tableObj = document.createElement("table");
tableObj.id = 'testTable';
// header
var theadObj = document.createElement("thead");
var thObj = document.createElement("th");
thObj.innerHTML = 'h1';
theadObj.appendChild(thObj);
thObj = document.createElement("th");
thObj.innerHTML = 'h2';
theadObj.appendChild(thObj);
thObj = document.createElement("th");
thObj.innerHTML = 'h3';
theadObj.appendChild(thObj);
tableObj.appendChild(theadObj);
// body
var tbodyObj;
var trObj;
var tdObj;
tbodyObj = document.createElement("tbody");
var count = 1;
for(i = 0; i < 3; i++){
trObj = document.createElement("tr");
for(j = 0; j < 3; j++){
tdObj = document.createElement("td");
tdObj.innerHTML = count;
trObj.appendChild(tdObj);
count++;
}
tbodyObj.appendChild(trObj);
}
tableObj.appendChild(tbodyObj);
tableDataDivObj.appendChild(tableObj);
}
Once the table is created dynamically, we append it to the div on the jsp page.
动态创建表后，我们将其附加到jsp 页面上的div。
Kindly suggest any modification, suggestions so that I can get this code work. this is just an example I have created of my real application . which involves complete mvc, where table data is retrived from the service methods and dao files. I am able to get the data into the table(I made sure after getting an alert on jsp page). I am not able to use datatable on the id of the table.
请提出任何修改建议，以便我可以使此代码正常工作。这只是我为我的真实应用程序创建的一个示例。这涉及完整的 mvc，其中表数据从服务方法和 dao 文件中检索。我能够将数据放入表中（我在 jsp 页面上收到警报后确定）。我无法在表的 ID 上使用数据表。
Thanks in advance!
提前致谢！
回答by amccausl
When your dataTables initialization is run, the table doesn't exist yes. You can fix by moving the $('#testTable').dataTable();after the table has been initialized.
当您的 dataTables 初始化运行时，该表不存在是的。您可以通过$('#testTable').dataTable();在表初始化后移动 来修复。
$(tableObj).dataTable();
at the end of the getTableDatafunction (which should be defined in your $(document).readycallback.
在getTableData函数的末尾（应该在你的$(document).ready回调中定义。
回答by Nitin Pawar
Yon can add datatable to your dynamically created table in javascript.Code is as follows:
Yon 可以在 javascript 中将数据表添加到您动态创建的表中。代码如下：
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
function createTable(){
var myTableDiv = document.getElementById("box");
var table = document.createElement('TABLE');
table.id='tableId'
table.border='1';
var header = table.createTHead();
var row = header.insertRow(0);
var cell = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(1);
cell.innerHTML = "<b>Name</b>";
cell1.innerHTML = "<b>Age</b>";
cell2.innerHTML = "<b>Email</b>";
cell3.innerHTML = "<b>address</b>";
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
for (var i=0; i<3; i++){
var tr = document.createElement('TR');
tableBody.appendChild(tr);
for (var j=0; j<4; j++){
var td = document.createElement('TD');
td.width='75';
td.appendChild(document.createTextNode("Cell " + i + "," + j));
tr.appendChild(td);
}
}
myTableDiv.appendChild(table);
$("#tableId").dataTable();
}
</head>
<body>
<input type="button" onclick="createTable();" value="CreateTable" /></br>
<div id="box">
</div>
</body>
</html>
回答by shiv.mymail
Please call jquery method once your table get created by dynamic javascript.
一旦您的表由动态 javascript 创建，请调用 jquery 方法。
回答by Alex
You can find example here how to create dynamically: http://datatables.net/release-datatables/examples/data_sources/js_array.html
您可以在此处找到如何动态创建的示例：http: //datatables.net/release-datatables/examples/data_sources/js_array.html
