title: How to display data using DataTable fetched data from API?
body: <p>I have data fetched form API. I want to display it into the DataTable.</p>
  <p>The data is fetched from the API and it got displayed into the DataTable but I have problem in displaying the data. The data is displayed but it also give me</p>
  <blockquote>
  <p>No data available in table</p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/hJToo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hJToo.png" alt="enter image description here" /></a></p>
  <p>below is what I have tried</p>
  <pre><code>&lt;div class=&quot;nk-block nk-block-lg&quot;&gt;
    &lt;div class=&quot;nk-block-head&quot;&gt;
      &lt;div class=&quot;nk-block-head-content&quot;&gt;
        &lt;h4 class=&quot;nk-block-title&quot;&gt;Data &lt;/h4&gt;
        &lt;div class=&quot;nk-block-des&quot;&gt;
          &lt;p&gt;Policy&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;card card-preview&quot;&gt;
      &lt;div class=&quot;card-inner&quot;&gt;
        &lt;table class=&quot;datatable-init table&quot; id=&quot;datatable&quot;&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;#&lt;/th&gt;
              &lt;th&gt;Module&lt;/th&gt;
              &lt;th&gt;Policy &amp; Terms of Services Details&lt;/th&gt;
  
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody id=&quot;dataDetails&quot;&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- .card-preview --&gt;
  &lt;/div&gt;
  &lt;!-- nk-block --&gt;
  </code></pre>
  <pre><code>&lt; script &gt;
  
  
    let cnt = 1;
  
  
  $(document).ready(function() {
  
    getList();
  
  })
  
  const getList = () =&gt; {
      axios.get(`${url}getList`)
        .then(function(res) {
          if (res.data.status == 'success') {
            res.data.result.map((e) =&gt; {
  
              if (e.role_id == '3') {
  
                $(&quot;#dataDetails&quot;).append(` 
                              &lt;tr&gt;
                                  &lt;td&gt;${cnt++}&lt;/td&gt;
                                  &lt;td&gt;${e.name}&lt;/td&gt;
                                  &lt;td&gt;&lt;a href=&quot;javascript:void(0);&quot;  onclick=&quot;detail('${e.id}')&quot;&gt;${e.title}&lt;/a&gt;&lt;/td&gt;
                              &lt;/tr&gt;
  
                          `
  
  
                );
              }
            })
          }
        })
    }
  
    &lt;
    /script&gt;
  
  </code></pre>
  <p>How do I fix the problem ? Because inside the table have data, but it keep displaying the <code>No data available in table</code></p>
  <p>after adding the <code>$(&quot;#datatable&quot;).DataTable(); </code> inside the <code>const</code></p>
  <pre><code>
   $(&quot;#dataDetails&quot;).append(` 
                              &lt;tr&gt;
                                  &lt;td&gt;${cnt++}&lt;/td&gt;
                                  &lt;td&gt;${e.name}&lt;/td&gt;
                                  &lt;td&gt;&lt;a href=&quot;javascript:void(0);&quot;  onclick=&quot;detail('${e.id}')&quot;&gt;${e.title}&lt;/a&gt;&lt;/td&gt;
                              &lt;/tr&gt;
  
                          `
                 $(&quot;#datatable&quot;).DataTable(); 
  
                );
  </code></pre>
  <p>I got error with <code>Uncaught SyntaxError: missing ) after argument list</code>
  <a href="https://i.stack.imgur.com/XwWNP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XwWNP.png" alt="enter image description here" /></a></p>
  <p>showing at this line</p>
  <p><a href="https://i.stack.imgur.com/goekQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/goekQ.png" alt="enter image description here" /></a></p>