title: jQuery dataTable sort with ajax loaded data
body: <p>I have several rows that include some lazy loaded data. For instance, </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;table border="1"&gt;
        &lt;tr&gt;
            &lt;th&gt;Employee&lt;/th&gt;&lt;th&gt;Sales&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Michale&lt;/td&gt;&lt;td&gt;1000&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Kim&lt;/td&gt;&lt;td id="kimSales"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;John&lt;/td&gt;&lt;td id="johnSales"&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is, <strong>I have to retrieve some data after page loaded</strong> because of some reasons. Let's suppose <code>kimSales</code> is <code>1500</code>, and johnSales is <code>2500</code>. </p>
  
  <pre><code>&lt;script&gt;
      $(document).on('ready', function(e){
           $('#kimSales').text(1500);
           $('#johnSales').text(2500);
      })     
  &lt;/script&gt;
  </code></pre>
  
  <p>In this situation, I want to sort properly with lazy loaded data. You know, jQuery dataTable has sorting features through click header of columns, like <a href="https://datatables.net" rel="nofollow noreferrer">https://datatables.net</a> I couldn't sort these data properly. The sorted data is not ascending, or dsc --- maybe dataTable couldn't recognize after loaded data. </p>
  
  <p>What I tried : </p>
  
  <pre><code>&lt;script&gt;
      $(document).on('ready', function(e){
           $('#kimSales').text(1500);
           $('#johnSales').text(2500);
      })
  
      table.dataTable(); // not properly working
  &lt;/script&gt;
  </code></pre>