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
– Nathan H, Commented Dec 5, 2013 at 9: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
– Nathan H, Commented Dec 5, 2013 at 9:48
Cells will be executed on the Click of Display button. On click of Display button, ShowTable will be called. — user2898127
– user2898127, Commented Dec 5, 2013 at 9:51
I have tried the code and it's working!! See this link what is the problem? — Hanady
– Hanady, Commented Dec 5, 2013 at 9:58

Sridhar R · Accepted Answer · 2013-12-05 10:02:45Z

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 5, 2013 at 10:02

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2898127 Over a year ago

So to make it filterable do I need to add <thead> in html code?

Sridhar R Over a year ago

table should follow above markup then initilaise the data table

user2898127 Over a year ago

But @Sridhar, I'm creating the whole table dynamically so, its not possible i guess...

Sridhar R Over a year ago

its possible @PratikSoni try with 2 variables and loop through it

renuka · Accepted Answer · 2013-12-05 11:25:53Z

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 5, 2013 at 11:25

renuka

5492 gold badges5 silver badges11 bronze badges

Comments

Mr.G · Accepted Answer · 2013-12-05 12:09:26Z

1

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

answered Dec 5, 2013 at 12:09

Mr.G

3,6092 gold badges19 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to convert HTML table into jQuery DataTable?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related