jQuery Tables mit JSON-Daten Auflistung

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..."); 
 

 
     } 
 
    })

Ich habe diesen Code. Der Code in den Kommentarzeilen ist der Vorgang des Hinzufügens zu der regulären Liste. Aber nicht für jQuery dataTables. Wie kann ich das machen.

Zweitens, nach dem Hinzufügen dieser dataTable, wie kann ich ID zu Listenelementen zuweisen, so dass es spezielle Seite mit diesem Listenelement verknüpft, wenn geklickt wird.

Answer 1

Das Problem hier ist, dass Sie DataTables vor dem Auffüllen der Tabelle initialisieren. Daher kann es nur eine leere Tabelle verarbeiten.

Sie müssen die DataTable initializer nach der for Schleife bewegen:

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' 
      ] 
     }); 

    },