How to convert HTML table into jQuery DataTable?

Question

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.

It's showing error 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.

When is your call executed? It seems you are declaring functions, when never calling them. Maybe you want this to be executed on ready? — Nathan H, Dec 05 '13 at 09:46
Also this error makes me thing your jQuery is not included correctly. Check in the Network tab of your developer tools, see if the files are all loaded correctly — Nathan H, Dec 05 '13 at 09:48
Cells will be executed on the Click of Display button. On click of `Display` button, `ShowTable` will be called. — , Dec 05 '13 at 09:51
I have tried the code and it's working!! [See this link](http://jsfiddle.net/p78WT/) what is the problem? — Hanady, Dec 05 '13 at 09:58

score 6 · Accepted Answer · answered Dec 05 '13 at 10:02

6

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:

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

answered Dec 05 '13 at 10:02

Sridhar R

20,190
6
38
35

So to make it filterable do I need to add `` in `html` code? – Dec 05 '13 at 10:10
table should follow above markup then initilaise the data table – Sridhar R Dec 05 '13 at 10:11
But @Sridhar, I'm creating the whole table dynamically so, its not possible i guess... – Dec 05 '13 at 10:24
its possible @PratikSoni try with 2 variables and loop through it – Sridhar R Dec 05 '13 at 10:27

score 3 · Answer 2 · answered Dec 05 '13 at 11:25

3

Make the head and body of the table into separate sections (thead and tbody) and call the plugin.

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

answered Dec 05 '13 at 11:25

renuka

549
2
5
11

score 1 · Answer 3 · answered Dec 05 '13 at 12:09

outside the function you declare otable.

var oTable;

Inside a function after create a html table:

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

How to convert HTML table into jQuery DataTable?

3 Answers3