如何将 HTML 表格转换为 jQuery DataTable？答案

【问题标题】：How to convert HTML table into jQuery DataTable?如何将 HTML 表格转换为 jQuery DataTable？
【发布时间】：2013-12-05 09:42:54
【问题描述】：

我试过了：

<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>

我想将此表转换为 jQuery DataTable。

它显示错误Uncaught ReferenceError: $ is not defined [repeated 2 times]。

如何解决这个问题？我想使用这个 jQuery DataTable 来搜索和分页功能。但首先要先转换成DataTable。

【问题讨论】：

您的通话何时执行？似乎您在声明函数，但从未调用它们。也许您希望它在就绪时执行？
这个错误也让我觉得你的 jQuery 没有正确包含。检查开发者工具的网络选项卡，看看文件是否都加载正确
您没有在 html 中链接 jquery
单元格将在单击显示按钮时执行。点击Display按钮，ShowTable将被调用。
我已经尝试了代码并且它正在工作！ See this link有什么问题？

标签： javascript jquery html jquery-datatables

【解决方案1】：

为了使 DataTables 能够正确运行，目标表的 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>

【讨论】：

所以要使其可过滤，我需要在html 代码中添加<thead> 吗？
表应该遵循上面的标记然后初始化数据表
但是@Sridhar，我正在动态创建整个表，所以我猜这不可能......
可能的@PratikSoni 尝试使用 2 个变量并循环遍历它

【解决方案2】：

将表格的头部和主体分成单独的部分（thead 和 tbody）并调用插件。

$('#table_id').dataTable({
        // parameters
});

【讨论】：

【解决方案3】：

在您声明为 otable 的函数之外。

var oTable;

创建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
                });

【讨论】：