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();。

然后在迭代时添加table.row.add($(productList )).draw();，即在for循环内。 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();
 }

将行添加到JQuery Datatable

1 个答案: