javascript 如何将 HTML 表格转换为 jQuery DataTable？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20396454/
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 convert HTML table into jQuery DataTable?
提问by renuka
I've tried this:
我试过这个：
<html> <body>
<script type="text/JavaScript" src="/DataTables/jquery-1.4.2.js"></script> <script type="text/JavaScript" src="/DataTables/jquery.dataTables.js"></script>
<table id="myTableId">
<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() {
document.getElementById("tbl_DynamicTable").style.display = ""; createTable(); }
function createTable() {
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;
$("#myTableId").dataTable(); } </script> </html>
I want to convert this table into jQuery DataTable.
我想将此表转换为 jQuery DataTable。
It's showing error Uncaught ReferenceError: $ is not defined [repeated 2 times].
它显示错误Uncaught ReferenceError: $ is not defined [repeated 2 times]。
How to solve this? I want to use this jQuery DataTable to Searching and paging function. But first want to convert it into DataTable first.
如何解决这个问题？我想使用这个 jQuery DataTable 来搜索和分页功能。但是首先要先将其转换为DataTable。
回答by Sridhar R
In order for DataTables to be able to function correctly, the HTML for the target table must be laid out in a well formed manner with the 'thead' and 'tbody' sections declared. For example:
为了使数据表能够正确运行，目标表的 HTML 必须以格式良好的方式布局，并声明 'thead' 和 'tbody' 部分。例如：
<table id="table_id">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
</tbody>
</table>
回答by renuka
Make the head and body of the table into separate sections (thead and tbody) and call the plugin.
将表的头部和主体分成单独的部分（thead 和 tbody）并调用插件。
$('#table_id').dataTable({
// parameters
});
回答by Mr.G
outside the function you declare otable.
在您声明 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
});
