[英]How can I convert dynamically generated table into DataTable using JavaScript or jQuery?
What I've done is created dynamic HTML table. 我所做的是创建动态HTML表。 And now I want to convert this table into
jQuery DataTables
. 现在,我想将此表转换为
jQuery DataTables
。
Is there any possible ways for that? 有什么可能的方法吗?
Here I've attached my dynamic HTML table
. 在这里,我已附加了动态
HTML table
。
<html>
<body>
<script type="text/javascript" charset="utf-8" src="/DataTables/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="/DataTables/media/js/jquery.dataTables.js"></script>
<table >
<tr>
<td>Enter Rows</td>
<td><input type="number" id="txtRows"/></td>
</tr>
<tr>
<td>Enter Columns</td>
<td><input type="number" id="txtCols"/></td>
</tr>
<tr>
<td colspan="2"><input type="button" id="btnDisplay" value="Display" onClick="ShowTable();"/></td>
</tr>
</table>
<table id="tbl_DynamicTable" border="1" style="display:none">
</table>
</body>
<script type="text/JavaScript">
function ShowTable()
{
debugger;
document.getElementById("tbl_DynamicTable").style.display = "";
createTable();
}
function createTable()
{
debugger;
var rows = document.getElementById("txtRows").value;
var cols = document.getElementById("txtCols").value;
var table = document.getElementById("tbl_DynamicTable");
var str="";
var randomColor;
for(var i=0;i<rows;i++)
{
randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
str += "<tr id=row" + i +" bgcolor="+randomColor+">";
for(var j=0;j<cols;j++)
{
if(i==0)
{
str += "<th> Header " + j + "</th>";
}
else
{
str += "<td> Row " + i + ", Cell "+ j + "</td>";
}
}
str += "</tr>";
}
table.innerHTML = str;
}
</script>
</html>
Now how can I convert this table into jQuery's DataTable? 现在如何将这个表转换为jQuery的DataTable?
Try this Example: 试试这个例子:
outside the function you declare otable. 在声明为不稳定的函数之外。
var oTable;
Inside a function after create a html table: 创建html表后在函数内部:
if(oTable.length>0)
oTable.fnDestroy();
oTable=$("tableid").dataTable({
"sDom": '<"top"i>rt<"bottom"flp><"clear">',
"sScrollY":500,
"bScrollCollapse": true,
"bPaginate": true,
"bFilter": true,
"bSort": true,
"bInfo": false,
"bSortClasses": false
});
在添加每个动态行时,将其推送到数组中,它将存储详细信息,然后您可以将其发送到数据库
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.