将行添加到JQuery Datatable中

Question

所以基本上，我对使用数据表有点想法。 但是，根据我的要求，我的问题有点不同。我甚至不确定这是否可能。

正如您在代码中看到的那样，$("#tableContainer tbody").append(productList);基本上会创建一个常规表（不是数据表）。

有没有一种方法可以直接在数据表中使用productList，以便它在表标准内创建？

 $(document).ready(function() { 
 
      $.post('query-data.php', { 
 
       type: "view-products" 
 
      }, function(response) { 
 
       var productList; 
 
       var parsedResponse = JSON.parse(response); 
 
       
 
       for (i = 0; i < parsedResponse.length; i++) { 
 
        productList = $('<tr><td>' + (parsedResponse[i].IS_AVILABLE == 1 ? '<i class="fa fa-check fa-fw"></i>' : '<i class="fa fa-times" aria-hidden="true"></i>') + '</td><td>' + (parsedResponse[i].IMAGE_URL != "" && parsedResponse[i].IMAGE_URL ? '<i class="fa fa-check fa-fw"></i>' : '<i class="fa fa-times" aria-hidden="true"></i>') + '</td><td>' + parsedResponse[i].PRODUCT_ID + '</td><td><a href="edit-product.php?product_id=' + parsedResponse[i].PRODUCT_ID + '&product_name=' + parsedResponse[i].NAME + '&business_id=' + parsedResponse[i].BUSINESS_ID + '&business_name=' + parsedResponse[i].BUSINESS_NAME + '&is_avilable=' + parsedResponse[i].IS_AVILABLE + '&image_url=' + parsedResponse[i].IMAGE_URL + '&start_time=' + parsedResponse[i].START_TIME + '&end_time=' + parsedResponse[i].END_TIME + '&category_ids=' + parsedResponse[i].CATEGORY_ID + '&category_names=' + parsedResponse[i].CATEGORY_NAME + '&product_description=' + parsedResponse[i].PRODUCT_DESCRIPTION + '&product_price=' + parsedResponse[i].PRODUCT_PRICE + '">' + parsedResponse[i].NAME + '</a></td><td>' + parsedResponse[i].CATEGORY_NAME + '</td><td>' + parsedResponse[i].BUSINESS_NAME + '</td></tr>'); 
 
        $("#tableContainer tbody").append(productList); 
 
       } 
 
       
 
      }); 
 
     });

<table id="tableContainer" class="table hover view-menus"> 
 
     <thead> 
 
     <tr> 
 
      <th>Avail</th> 
 
      <th>Img</th> 
 
      <th>Prod ID</th> 
 
      <th>Prod Name</th> 
 
      <th>Cat Name</th> 
 
      <th>Biz Name</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     
 
     </tbody> 
 
     <tfoot> 
 
     <tr> 
 
      <th>Avail</th> 
 
      <th>Img</th> 
 
      <th>Prod ID</th> 
 
      <th>Prod Name</th> 
 
      <th>Cat Name</th> 
 
      <th>Biz Name</th> 
 
     </tr> 
 
     </tfoot> 
 
    </table>

Answer 1

Whooppie！原来，这很简单。

在开始for循环之前首先声明var table = $('table').DataTable();。

然后在迭代过程中，即在for循环内添加table.row.add($(productList)).draw();。 DONE！ :)

var table = $('table').DataTable(); 
for (i = 0; i < parsedResponse.length; i++) { 
    productList = $('<tr><td>' + (parsedResponse[i].IS_AVILABLE == 1 ? '<i class="fa fa-check fa-fw"></i>' : '<i class="fa fa-times" aria-hidden="true"></i>') + '</td><td>' + (parsedResponse[i].IMAGE_URL != "" && parsedResponse[i].IMAGE_URL ? '<i class="fa fa-check fa-fw"></i>' : '<i class="fa fa-times" aria-hidden="true"></i>') + '</td><td>' + parsedResponse[i].PRODUCT_ID + '</td><td><a href="edit-product.php?product_id=' + parsedResponse[i].PRODUCT_ID + '&product_name=' + parsedResponse[i].NAME + '&business_id=' + parsedResponse[i].BUSINESS_ID + '&business_name=' + parsedResponse[i].BUSINESS_NAME + '&is_avilable=' + parsedResponse[i].IS_AVILABLE + '&image_url=' + parsedResponse[i].IMAGE_URL + '&start_time=' + parsedResponse[i].START_TIME + '&end_time=' + parsedResponse[i].END_TIME + '&category_ids=' + parsedResponse[i].CATEGORY_ID + '&category_names=' + parsedResponse[i].CATEGORY_NAME + '&product_description=' + parsedResponse[i].PRODUCT_DESCRIPTION + '&product_price=' + parsedResponse[i].PRODUCT_PRICE + '">' + parsedResponse[i].NAME + '</a></td><td>' + parsedResponse[i].CATEGORY_NAME + '</td><td>' + parsedResponse[i].BUSINESS_NAME + '</td></tr>'); 
    table.row.add($(productList)).draw(); 
}