jQueryのDataTableのは

Question

$.ajax({ 
 
     url: "https://localhost:450/rest/products?pageNumber=1&pageCount=100", 
 
     type:"post", 
 
     dataType:"json", 
 
     traditional:true, 
 
     contentType : "application/json; charset=utf-8", 
 
     processData : false, 
 
     data: 
 
      JSON.stringify(hostAddresses) 
 

 
     , 
 

 

 

 
     success:function (response) { 
 
      console.log(response); 
 
      var trHTML =''; 
 
      $('.js-exportable').DataTable({ 
 
       dom: 'Bfrtip', 
 
       responsive: true, 
 
       buttons: [ 
 
        'copy', 'csv', 'excel', 'pdf', 'print' 
 
       ] 
 
      }); 
 
      for(var i = 0 ; i < response.length ; i++) 
 
      { 
 

 
       for(var j = 0 ; j < response[i].Products.length ; j ++) 
 
       { 
 

 

 
        // trHTML += '<tr><td>' +response[i].IP + '</td><td>' + response[i].Products[j].Product + '</td><td>' + response[i].Products[j].CVECount + '</td>'; 
 
        //console.log(response[i].Products[j].Product); 
 
        //console.log(trHTML); 
 
        //$('#ProductsTableBody').append(trHTML); 
 
       } 
 

 
      } 
 

 

 
     }, 
 
     error:function (xhr) { 
 
      console.log("Error..."); 
 

 
     } 
 
    })

私はこのコードを持っています。コメント行のコードは、通常の順序リストに追加するプロセスです。しかし、jQueryのdataTablesでは動作しません。これどうやってするの。

これらのdataTableを追加した後、リストアイテムにidを割り当てると、そのアイテムをクリックするとそのアイテムに関連付けられた特別なページが表示されます。

Answer 1

ここでの問題は、テーブルを作成する前にDataTableを初期化することです。したがって、空のテーブルのみを処理できます。

あなたはforループの後DataTable初期化子を移動する必要があります。

success:function (response) { 
     console.log(response); 
     var trHTML =''; 

     for(var i = 0 ; i < response.length ; i++) 
     { 

      for(var j = 0 ; j < response[i].Products.length ; j ++) 
      { 


       trHTML += '<tr><td>' +response[i].IP + '</td><td>' + response[i].Products[j].Product + '</td><td>' + response[i].Products[j].CVECount + '</td>'; 
       console.log(response[i].Products[j].Product); 
       console.log(trHTML); 
       $('#ProductsTableBody').append(trHTML); 
      } 

     } 
     $('.js-exportable').DataTable({ 
      dom: 'Bfrtip', 
      responsive: true, 
      buttons: [ 
       'copy', 'csv', 'excel', 'pdf', 'print' 
      ] 
     }); 

    },