title: How to convert HTML table into jQuery DataTable?
body: <p>I've tried this:</p>
  
  <pre><code>&lt;html&gt; &lt;body&gt;
  
  &lt;script type="text/JavaScript" src="/DataTables/jquery-1.4.2.js"&gt;&lt;/script&gt; &lt;script type="text/JavaScript" src="/DataTables/jquery.dataTables.js"&gt;&lt;/script&gt;
  
          &lt;table id="myTableId"&gt;
              &lt;tr&gt;
                  &lt;td&gt;Enter Rows&lt;/td&gt;
                  &lt;td&gt;&lt;input type="number" id="txtRows"/&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Enter Columns&lt;/td&gt;
                  &lt;td&gt;&lt;input type="number" id="txtCols"/&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;&lt;input type="button" id="btnDisplay" value="Display" onClick="ShowTable();"/&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;table id="tbl_DynamicTable" border="1" style="display:none"&gt;
          &lt;/table&gt;
      &lt;/body&gt;         &lt;script type="text/JavaScript"&gt;
                  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&lt;rows;i++)
                  {
                      randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
                      str += "&lt;tr id=row" + i +" bgcolor="+randomColor+"&gt;";
  
                      for(var j=0;j&lt;cols;j++)
                      {
                          if(i==0)
                          {
                              str += "&lt;th&gt; Header " + j + "&lt;/th&gt;";
                          }
                          else
                          {
                              str += "&lt;td&gt; Row " + i + ", Cell "+ j + "&lt;/td&gt;";
                          }
                      }
                      str += "&lt;/tr&gt;";
                  }
                  table.innerHTML = str;
                  $("#myTableId").dataTable();            }   &lt;/script&gt;    &lt;/html&gt;
  </code></pre>
  
  <p>I want to convert this table into jQuery DataTable.</p>
  
  <p>It's showing error <code>Uncaught ReferenceError: $ is not defined [repeated 2 times]</code>.</p>
  
  <p>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.</p>