title: Display dynamic table values using dataTables
body: <p>I have a problem in displaying the values from database using dataTables. 
  I cant trigger the <code>$('#id').DataTable()</code> to magic my html table into dataTables while simple and plain html displays it correctly. I think my problem is in the ajax.. So here's my code: </p>
  
  <p>Any help will be higgly appreciated! :))</p>
  
  <pre><code>&lt;script type="text/javascript" src="{!! asset('js/jquery.datatables.min.js') !!}"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="{!! asset('js/jquery-3.2.1.min.js') !!}"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript"&gt;
          $(function(){
  
              $(".list-link").click(function(e) {  //for my
                  e.stopPropagation();             //siderbar accordion
                                                   //animation
              });                                     
  
              $("#schooltableDesc").DataTable();
  
              $("#generateBtn").on("click", function() {  //onClick, the ajax tables
                  $("#schooltableDesc").empty();          //will be empty and will redraw
                  $("#schooltableAsc").empty();           //with new values based on the dropdown
                  $("#collegetableDesc").empty();         
                  $("#collegetableAsc").empty();
                  $("#programtableDesc").empty();
                  $("#programtableAsc").empty(); 
  
  
              var yearData = {
                  from: $('#datefrom').val(),
                  to: $('#dateto').val(),
  
              }; 
  
                  $.ajax({
                  url: '/university-analysis/where-between',
                  data: yearData,
                  dataType: 'json',
                  method: 'get',
                  success: function (response) {   
  
                      // $("#totals").html(response.h); 
                      $("#schooltableDesc").html(response.fsD);                     
                      $("#collegetableDesc").html(response.cD);
                      $("#programtableDesc").html(response.pD); 
                      $("#schooltableAsc").html(response.fsA);             
                      $("#collegetableAsc").html(response.cA);
                      $("#programtableAsc").html(response.pA); 
  
                      $("#popu").text(response.total_enrolled);
                       $("#males").text(response.total_males); 
                       $("#females").text(response.total_females);             
                       $("#no_of_schools").text(response.schools);
                       $("#ave_age").text(response.avg_a);  
  
  
  
                  }
              }); 
  </code></pre>
  
  <p>And here's the html of the table</p>
  
  <pre><code>&lt;table class="table table-bordered" id="schooltableDesc"&gt;
        &lt;thead&gt;
               &lt;th&gt;Age&lt;/th&gt;
               &lt;th&gt;Top 5 Feeder Schools&lt;/th&gt;
               &lt;th&gt;Male&lt;/th&gt;
               &lt;th&gt;Female&lt;/th&gt;
               &lt;th&gt;Total&lt;/th&gt;
               &lt;th&gt;Average rate&lt;/th&gt;
       &lt;/thead&gt;
  
       &lt;tbody&gt;
              @foreach($schoolsD as $t)
                  @php
                  $age = $t-&gt;AverageAge;
                  $fs = $t-&gt;HS_School;
                  $bp = $t-&gt;Male;
                  $gp = $t-&gt;Female;
                  $total = $t-&gt;TOTAL;
                  $avg = $t-&gt;arate; 
                  @endphp
                  &lt;tr&gt;
                      &lt;td&gt;{{$age}}&lt;/td&gt;
                      &lt;td&gt;{{ucwords(strtolower($fs))}}&lt;/td&gt;
                      &lt;td&gt;{{$bp}}&lt;/td&gt;
                      &lt;td&gt;{{$gp}}&lt;/td&gt;
                      &lt;td&gt;{{$total}}&lt;/td&gt;
                      &lt;td&gt;{{number_format($avg, 3)}}%&lt;/td&gt;                    
                  &lt;/tr&gt;
                  @endforeach
  
      &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>And then the controller for ajax: </p>
  
  <pre><code>    //desc
      $schoolsD = DB::table("vw_es_students")
          -&gt;selectRaw("AVG(DATEDIFF(year, [DateOfBirth], GETDATE())) AS \"AverageAge\", HS_School, SUM(IIF(Gender = 'M', 1, 0)) AS \"Male\", SUM(IIF(Gender = 'F', 1, 0)) AS \"Female\", count(*) as \"TOTAL\"")
          -&gt;whereRaw(sprintf("DateAdmitted BETWEEN '%s-01-01' AND ('%s-12-31') and HS_School != ''", $yearFrom, $yearTo))
          -&gt;whereRaw("HS_School != ''")
          -&gt;groupBy("HS_School")-&gt;orderBy("TOTAL", "desc")-&gt;get(); 
  
  
  
  
  $responseSchoolsD = "&lt;table class='table no-border' id='schooltableDesc'&gt;
                           &lt;thead&gt;
                           &lt;th&gt;Age&lt;/th&gt;
                           &lt;th&gt;Top 5 Feeder Schools&lt;/th&gt;
                           &lt;th&gt;Male&lt;/th&gt;
                           &lt;th&gt;Female&lt;/th&gt;
                           &lt;th&gt;Total&lt;/th&gt;
                           &lt;/thead&gt;&lt;tbody&gt;";
  
  
           foreach($schoolsD as $t){
  
                   $age = $t-&gt;AverageAge;
                   $fs = $t-&gt;HS_School;
                   $bp = $t-&gt;Male;
                   $gp = $t-&gt;Female;
                   $total = $t-&gt;TOTAL;
  
  
              $responseSchoolsD .=  "&lt;tr&gt;";
  
              $responseSchoolsD .= "&lt;td&gt;" . $age . "&lt;/td&gt;";
              $responseSchoolsD .= "&lt;td&gt;" . $fs . "&lt;/td&gt;";            
              $responseSchoolsD .= "&lt;td&gt;" . $bp . "&lt;/td&gt;";     
              $responseSchoolsD .= "&lt;td&gt;" . $gp . "&lt;/td&gt;";
              $responseSchoolsD .= "&lt;td&gt;" . $total . "&lt;/td&gt;";
  
          } 
  
           $responseSchoolsD .= "&lt;/tr&gt;&lt;/table&gt;"; 
  </code></pre>