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

Question

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

4

我尝试了这个：

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

- user2898127

你的调用是在什么时候执行的？看起来你在声明函数，但从未调用它们。也许你想要在准备就绪时执行它们？ - Nathan H

此外，这个错误让我觉得你的 jQuery 没有正确地被包含。请在开发者工具的网络选项卡中检查，看看文件是否都已经正确加载。 - Nathan H

1

你的HTML中没有链接jquery。 - coolguy

单击“显示”按钮时，单元格将被执行。单击“显示”按钮时，将调用“ShowTable”。 - user2898127

1

我已经尝试了这段代码，它可以工作！请查看此链接问题在哪里？ - Hanady

有关搜索方面的任何解决方案吗？ - user2898127

3个回答

3

将表格的头部和主体分别制作成独立的部分（thead 和 tbody），然后调用插件。

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

- renuka

1

在函数外声明 otable。保留 HTML，不要解释。

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

- Mr.G

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sridhar R · Accepted Answer

为了使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>