title: How can i use DataTable in the following case?
body: <p>The following html table is created from json data file.
  Kindly tell me how can i use DataTable and i also need to refresh the table it means every few seconds the new data comes in the json file so the code should read the new json file and updates it in every few seconds.
  The running table which i am trying to initiate with DataTable says no data availabe.
  Thanks in advance   </p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt; 
  &lt;/script&gt;
      &lt;script src="js/myjs.js"&gt;&lt;/script&gt;
      &lt;script 
      src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" 
  type="text/javascript"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" 
  href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"&gt;
          &lt;title&gt;qstat&lt;/title&gt;
          &lt;style&gt;
          th,td,p,input {
              font:14px Verdana;
          }
          table ,th, td
          {
              border: solid 1px#f345;
              border-collapse: collapse;
              padding: 2px 3px;
              text-align: center;
          }
          th {
              font-weight:bold;
              }
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      color: #2f23d;
  
      &lt;div id="tables"&gt;
         &lt;div id="tabs"&gt;
             &lt;ul&gt;
                 &lt;li&gt;&lt;a href="#running_jobs"&gt;Running Jobs&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#queued_jobs"&gt;Queued Jobs&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#hold"&gt;Hold Jobs&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;
             &lt;div id="running_jobs"&gt;
                 &lt;table class="data" id="running"&gt;
                     &lt;thead&gt;
                         &lt;tr&gt;
                             &lt;th style="display: none"&gt;Color&lt;/th&gt;
                             &lt;th class="header_left"&gt;Job ID&lt;/th&gt;
                             &lt;th&gt;Job Name&lt;/th&gt;
                             &lt;th&gt;User&lt;/th&gt;
                             &lt;th&gt;Time Use&lt;/th&gt;
                             &lt;th&gt;Queue&lt;/th&gt;
                         &lt;/tr&gt;
                     &lt;/thead&gt;
                 &lt;/table&gt;
             &lt;/div&gt;
             &lt;div id="queued_jobs"&gt;
                 &lt;table class="data" id="queued"&gt;
                     &lt;thead&gt;
                         &lt;tr&gt;
                          &lt;th class="header_left"&gt;Job ID&lt;/th&gt;
                          &lt;th&gt;Job Name&lt;/th&gt;
                          &lt;th&gt;User&lt;/th&gt;
                          &lt;th&gt;Time Use&lt;/th&gt;
                          &lt;th&gt;Queue&lt;/th&gt;
                         &lt;/tr&gt;
                     &lt;/thead&gt;
                 &lt;/table&gt;
             &lt;/div&gt;
             &lt;div id="hold_jobs"&gt;
                 &lt;table class="data" id="hold"&gt;
                     &lt;thead&gt;
                         &lt;tr&gt;
                          &lt;th class="header_left"&gt;Job ID&lt;/th&gt;
                          &lt;th&gt;Job Name&lt;/th&gt;
                          &lt;th&gt;User&lt;/th&gt;
                          &lt;th&gt;Time Use&lt;/th&gt;
                          &lt;th&gt;Queue&lt;/th&gt;
                         &lt;/tr&gt;
                     &lt;/thead&gt;
                 &lt;/table&gt;
             &lt;/div&gt;
         &lt;/div&gt; 
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;script&gt;
          function CreateTable()
          {
           $.getJSON("jsonoutput.json",function(data){
               var Running = new Object();
               var Queue = new Object();
               var Hold = new Object();
  
               for(var i in data)
               {
                  var job = {};
                  var ndi = data[i]
                  job.Job_ID = i;
                  job.Job_Name=ndi["Name"];
                  job.Job_User=ndi["User"];
                  job.Job_Time_Use=ndi["Time Use"];
                  job.Job_State= ndi["State"];
                  job.Job_Queue= ndi["Queue"];
              var job_data = ' ';
              job_data+= '&lt;tr&gt;';
              job_data+='&lt;td&gt;' +job.Job_ID+'&lt;/td&gt;';
              job_data+='&lt;td&gt;'+job.Job_Name+'&lt;/td&gt;';
              job_data+='&lt;td&gt;'+job.Job_User+'&lt;/td&gt;';
              job_data+='&lt;td&gt;'+job.Job_Time_Use+'&lt;/td&gt;';
              job_data+='&lt;td&gt;'+job.Job_Queue+'&lt;/td&gt;';
              job_data+='&lt;/tr&gt;';
              if(job.Job_State=="R")
              $('#running').append(job_data);
              else if(job.Job_State=="Q")
              $('#queued').append(job_data);
              else
              $('#hold').append(job_data);
           }   
          });
      }
      &lt;/script&gt;
      &lt;script&gt;
      CreateTable();
      $('#running').DataTable();
  
      &lt;/script&gt;
  </code></pre>