dataTablesを使用して動的表の値を表示

Question

dataTablesを使用してデータベースから値を表示する際に問題があります。 $('#id').DataTable()を私のhtmlテーブルをdataTablesにマジックさせることはできませんが、シンプルでプレーンなhtmlは正しく表示されます。私は私の問題は、アヤックスにあると思う..だからここに私のコード：

どんな助けがhigglyに評価される！ :)）

<script type="text/javascript" src="{!! asset('js/jquery.datatables.min.js') !!}"></script> 
<script type="text/javascript" src="{!! asset('js/jquery-3.2.1.min.js') !!}"></script> 
<script type="text/javascript"> 
     $(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); 



       } 
      }); 

そしてここでは、テーブル

<table class="table table-bordered" id="schooltableDesc"> 
     <thead> 
      <th>Age</th> 
      <th>Top 5 Feeder Schools</th> 
      <th>Male</th> 
      <th>Female</th> 
      <th>Total</th> 
      <th>Average rate</th> 
    </thead> 

    <tbody> 
      @foreach($schoolsD as $t) 
       @php 
       $age = $t->AverageAge; 
       $fs = $t->HS_School; 
       $bp = $t->Male; 
       $gp = $t->Female; 
       $total = $t->TOTAL; 
       $avg = $t->arate; 
       @endphp 
       <tr> 
        <td>{{$age}}</td> 
        <td>{{ucwords(strtolower($fs))}}</td> 
        <td>{{$bp}}</td> 
        <td>{{$gp}}</td> 
        <td>{{$total}}</td> 
        <td>{{number_format($avg, 3)}}%</td>      
       </tr> 
       @endforeach 

    </tbody> 
    </table> 

のHTMLおよびAjax用のコントローラです：

//desc 
    $schoolsD = DB::table("vw_es_students") 
     ->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\"") 
     ->whereRaw(sprintf("DateAdmitted BETWEEN '%s-01-01' AND ('%s-12-31') and HS_School != ''", $yearFrom, $yearTo)) 
     ->whereRaw("HS_School != ''") 
     ->groupBy("HS_School")->orderBy("TOTAL", "desc")->get(); 




$responseSchoolsD = "<table class='table no-border' id='schooltableDesc'> 
         <thead> 
         <th>Age</th> 
         <th>Top 5 Feeder Schools</th> 
         <th>Male</th> 
         <th>Female</th> 
         <th>Total</th> 
         </thead><tbody>"; 


     foreach($schoolsD as $t){ 

       $age = $t->AverageAge; 
       $fs = $t->HS_School; 
       $bp = $t->Male; 
       $gp = $t->Female; 
       $total = $t->TOTAL; 


      $responseSchoolsD .= "<tr>"; 

      $responseSchoolsD .= "<td>" . $age . "</td>"; 
      $responseSchoolsD .= "<td>" . $fs . "</td>";    
      $responseSchoolsD .= "<td>" . $bp . "</td>";  
      $responseSchoolsD .= "<td>" . $gp . "</td>"; 
      $responseSchoolsD .= "<td>" . $total . "</td>"; 

     } 

     $responseSchoolsD .= "</tr></table>"; 

Answer 1

あなたはアイテムを取得し、このようにテーブルを埋める試すことができます：

<script type="text/javascript"> 
     (function ($) { 
     $(document).ready(function() { 
     itemsTable = null, 
     getItems = function() { 
          return $.Deferred(function() { 
           var that = this; 
           $.getJSON('/university-analysis/where-between', function (data) { 
            that.resolve(data); 
           }); 
          }); 
         }, 

      $(".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(), 

      }; 

      showItemsTable = function() { 
         return $.Deferred(function() { 
          var that = this; 
          getItems().done(function (itemsData) { 
           try { 
            itemsTable = $("#schooltableDesc").DataTable({ 

             data: itemsData, 
             columns: [ 
             DataTables.expandCol, 
             {"data": 'age'}, 
             {"data": 'your data...'}, 
             {"data": 'your data...'}, 
             {"data": '...'}, 
             {"data": '...'}, 
             {"data": '...'}, 
             {"data": '...'} 
            ] 
            }); 
            // $("#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); 
            //console.log(itemsTable); 

            that.resolve(); 
           }catch (e) { 
            console.log(e.message); 
           } 
          }); 
         }); 
        }, 
      showItemsTable(); 



      });//end of doc ready 
     });</script> 

希望する役に立った！