Add rows to a JQuery Datatable

Question

So basically, I get a little bit of idea about using data tables. However, my question is a bit different based on my requirement. I'm not even sure whether it's possible.

As you may see inside the code, $("#tableContainer tbody").append(productList); basically creates a regular table (NOT a datatable).

Is there a way I can use productList directly inside a datatable so that it is created within the table standards?

      $(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>

Try to move var t = $('#tableContainer').DataTable(); after your for loop, if you convert your table into DataTable first, it is suggested to use DataTable API to add new node rather than adding HTML dom — Katrin
– Katrin, Commented Feb 24, 2017 at 15:50
My apologies. Actually, I'd put this line by mistake in the code var t = $('#tableContainer').DataTable();. I actually don't know how to map my dynamically created tr to datatable — LEE
– LEE, Commented Feb 24, 2017 at 16:03

LEE · Accepted Answer · 2017-02-24 16:10:07Z

Whooppie!! Turns out, it was quite simple.

First declare var table = $('table').DataTable(); before starting the for loop.

Then add table.row.add($(productList )).draw(); while iterating, i.e. inside the for loop. 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();
 }

@Katrin Yes, it did. Was about to write this comment. Thanks a lot :).

Collectives™ on Stack Overflow

Add rows to a JQuery Datatable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related