How To Append Ajax Result In Modal With Datatable

Good day everyone! I am trying to append my ajax result in my datatable inside my modal. I already get the data that I needed but it still shows that data is not available. It sho

Solution 1:

First store the dataTable object in a variable,

var dataTable = $("#viewTable").DataTable();

Then on ajax success, use dataTable.add([" "," ", " "]).draw(), wherein dataTable is the variable name.

To clear the data table use dataTable.clear();

dataTable.clear().draw();

See code below;

success: function(result) {
  // store your data table object in a variablevar dataTable = $("#viewTable").DataTable();
  /////////////////////////////////////////////
  dataTable.clear().draw();

  $.each(result, function(index, value) {
    console.log(value);

    // use data table row.add, then .draw for table refresh
    dataTable.row.Add([value.qr_code, value.reference_no, value.brand_name, value.model_name, value.unitPrice]).draw();
  });
}

Solution 2:

Add <tbody> tag to you HTML code as below,

<tableid="viewTable"class="table table-striped"><thead><tr><th>Barcode</th><th>Reference Number</th><th>Brand Name</th><th>Model Name</th><th>Unit Price</th></tr></thead><tbody></tbody><!-- New line --></table>

Then append to tbody directly,

     $('#viewTable > tbody').append(
             '<tr>' +
                '<td>' + value.qr_code + '</td>' +
                '<td>' + value.reference_no + '</td>' +
                '<td>' + value.brand_name + '</td>' +
                '<td>' + value.model_name + '</td>' +
                '<td>' + value.unitPrice + '</td>' +
             '</tr>' +
       )

Solution 3:

So I'm not sure if you're using the DataTable jQuery plugin found here: https://datatables.net/

It almost looks like you are. I love this plugin and if you are not using it, I would definitely suggest you do use it. It's a great tool. It allows me to avoid using .each and .append as the plugin handles iterations for me.

So you have your html table grid built already so I don't need to cover that. So let's assume you have data to be called and I will go ahead and use what data points you have in your question to not confuse you. Before we start though, let's make sure of a couple of things, make sure your modal with your table is hidden. I personally use bootstrap modals as they are quick and easy. Please note I use the AJAX shorthand and hopefully that doesn't confuse you but the concept is the exact same. Fetch your data -> on success, do something with it.

// our html modal will have an id of mymodal// wait for page to load
$(document).ready(()=> {
    // pretending that we have a form and you are searching by that...let refnum = $("#refnum").val()
    $("#dataform").submit((event)=> {
        $.get("data.php?referencenumber=" + encodeURIComponent(refnum), (data)=> {
            console.log(data)
            $("#viewTable").DataTable({
                destroy: true// allows for table to be reloaded with new data SUPER IMPORTANT!data: data,
                columns: [
                    // data tables iterating through the data for you
                    {'data': 'barcode'},
                    {'data': 'referencenumber'},
                    {'data': 'brandname'},
                    {'data': 'modelname'},
                    {'data': 'unitprice'},
                ]
            });
            // display hidden modal with data table. You will need to adjust the size of the modal according to how you see fit in CSS.
       $("#mymodal").slideDown(300);
        });
       event.preventDefault();
    });
});

I hope this helps you.