jQuery DataTables “No Data Available in Table”

by

Please try to initiate the dataTable after your AJAX loaded table is appended on body.

$ ( document ).ready(function() {
$.ajax({
    type: 'GET',
    url: 'models/summary.php',
    mimeType: 'json',
    success: function(data) {
        $.each(data, function(i, data) {
            var body = "<tr>";
            body    += "<td>" + data.name + "</td>";
            body    += "<td>" + data.address + "</td>";
            body    += "<td>" + data.phone_no + "</td>";
            body    += "<td>" + data.birthday + "</td>";
            body    += "<td>" + data.color + "</td>";
            body    += "<td>" + data.car + "</td>";
            body    += "<td>" + data.hobbies + "</td>";
            body    += "<td>" + data.relatives + "</td>";
            body    += "</tr>";
            $( "#summary-table tbody" ).append(body);
        });
        /*DataTables instantiation.*/
        $( "#summary-table" ).DataTable();
    },
    error: function() {
        alert('Fail!');
    }
});
});

Hope, this would help!

More Related Contents:

  1. How to send data to the server via Ajax?
  2. HTML: how refresh information in [closed]
  3. How to make page loaders/animations/transitions
  4. How to send FormData objects with Ajax-requests in jQuery? [duplicate]
  5. Refresh/reload the content in Div using jquery/ajax
  6. Set timeout for ajax (jQuery)
  7. Using HTML5 file uploads with AJAX and jQuery
  8. Prevent Page Load on Jquery Form Submit with None Display Button
  9. Why is it a bad practice to return generated HTML instead of JSON? Or is it?
  10. “Mixed content blocked” when running an HTTP AJAX operation in an HTTPS page
  11. How to bind Events on Ajax loaded Content?
  12. jquery submit form and then show results in an existing div
  13. Javascript regex returning true.. then false.. then true.. etc [duplicate]
  14. How do I abort image load requests without using window.stop()
  15. how to assign javascript variable value to php variable
  16. How to generate a thumbnail image after adding an image inside an input type=”file” in a form and submitting them both on the same form
  17. How to replace html element with ajax response?
  18. How to change URL in browser without navigating away from page?
  19. How can I get all a form’s values that would be submitted without submitting [duplicate]
  20. When loading an html page via ajax, will script tags be loaded?
  21. how to use jQuery ajax calls with node.js
  22. Twitter-style autocomplete in textarea
  23. Scrolling Overflowed DIVs with JavaScript
  24. jquery ajax parse response text
  25. Parsing returned HTML from jQuery AJAX request
  26. How to replace the entire html webpage with ajax response?
  27. jQuery click not working for dynamically created items [duplicate]
  28. Stop setInterval
  29. Will HTML5 allow web apps to make peer-to-peer HTTP connections?
  30. Creating a jQuery object from a big HTML-string

Leave a Comment