Jquery Datatables Data Appending Data to Table through Ajax

Question

I am using a custom search function to an ajax query, that returns HTML data on a successful call. I am wanting to append this data to a jquery data table that is already initialized on the page. When the page loads the jquery datatable is shown, however when I initiate the search function, the data gets appended into the datatable, but is not sortable, searcheable form the datatable UI. The ajax call does work and data is returned when I place the successful call into the console.log.

Here is the HTML:

<table id="partTable">
<thead>
    <tr>
        <td><h4>Part Number</h4></td>
        <td><h4>Vendor Name</h4></td>
        <td><h4>Description</h4></td>
        <td><h4>Quantity</h4></td>
        <td><h4>Reorder Point</h4></td>
        <td><h4>Cost</h4></td>
        <td><h4>12 Month Sales</h4></td>
    </tr>
</thead>
<tbody>
</tbody>
</table>

Here is the Jquery with the Ajax call:

$(document).ready(function(){   
    $('#partTable').DataTable();
    $("#target").click(function() {
    $("#target").prop("disabled",true);
    $("#spinner").show();
    var locations = $("#locations").val();
    var percentages = $("#percentages").val();
    $.ajax({
      type: "GET",
      url: "/XXXXX/xxxxxxWS.php",
      data:{
        locations : locations,
        percentages : percentages
      },
      success: function(data){
        $("#target").prop("disabled",false);
        $("#spinner").hide();
           $("#partTable tbody").empty().append(data);
      }
    });
});

});

This is the structure of the formatted HTML data returned from the ajax call.

<tr>
     <td>0</td>
     <td>0</td>
     <td>0</td>                
     <td>0</td>
     <td>0</td>
     <td>0</td>
     <td>0</td>
 </tr>

 <tr>
     <td>1</td>
     <td>1</td>
     <td>1</td>                
     <td>1</td>
     <td>1</td>
     <td>1</td>
     <td>1</td>
 </tr>

Are you trying to build a custom search function for Datatables? And if so why not just add the data when you call Datatables? — code
– code, Commented Jul 27, 2015 at 17:06

code · Accepted Answer · 2015-07-27 17:12:13Z

1

If you're trying to add data to a table on page load why not add data on initiation of the tables as

$('#partTable').DataTable({
    "processing": true,
    "searching": false,
    "responsive": true,
    "ajax": { "url": "/XXXXX/xxxxxxWS.php", "type": "GET", "data": function (c) { c.locations = locations; c.percentages = percentages; } },
    "columns": [{"data": "ColumnNameFromPHP"}, {"data": "ColumnNameFromPHP"}, {"data": "ColumnNameFromPHP"}, {"data": "ColumnNameFromPHP"}]
});

Please Note the columns property sets the columns based off the names being returned from the "get" ajax call.

answered Jul 27, 2015 at 17:12

code

1,1378 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery Datatables Data Appending Data to Table through Ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related