Drawing DataTables in Ajax Success function

Question

This is my code:

 var $j = jQuery.noConflict();
var oTable;
oTable = $j('#jqueryDataTable').dataTable();

$j(document).ready(function () {

    $j("#goButton").click(function (e) {


        $j.ajax({
            "type": "GET",
                "url": "navigate.do?submitbutton=true",
                "error": function (jqXHR, textStatus, errorThrown) {
                alert('Please try again');
            },
                "success": function (jqXHR, textStatus, errorThrown) {

                var totalRecords = jqXHR["iTotalRecords"];
                if (totalRecords == -1) {
                    $j("#tableGrid").hide();
                    $j("#noResults").show();
                } else {
                    $j("#tableGrid").show();
                    $j("#noResults").hide();

                    oTable = $j('#jqueryDataTable').dataTable({
                        "bDestroy": true,
                            "bProcessing": true,
                            "bRetrieve": true,
                            "bServerSide": false,
                            "bAutoWidth": false,
                            "lengthMenu": [25, 50, 100],
                            "sPaginationType": "full_numbers",
                            "bJQueryUI": false,
                            "sDom": 'C<"clear">lfrtip',
                            "oLanguage": {
                            "sEmptyTable": "Yahooo and Hotmail .."
                        },
                            "aoColumns": [{
                            "aTargets": [0],
                                "mData": "pri",
                                "sDefaultContent": "",
                                "type": "string",
                                "sWidth": "2em;",
                                "sClass": "pri",
                                "mRender": function (data, type, full) {
                                if (data == '0') {
                                    return '<img src="images/blank.gif" style="border:0px;">';
                                } else {
                                    return data;
                                }
                            }
                        }, {
                            "mData": "dateToday",
                            "sDefaultContent": "",
                            "sWidth": "5em;",
                            "sClass": "pri"
                        }, {
                            "aTargets": [2],
                                "mData": "time",
                                "sDefaultContent": "",
                                "type": 'alt-string',
                                "sWidth": "3em;",
                                "sClass": "pri",
                                "mRender": function (data, type, full) {
                                if (data == ' ') {
                                    return '<img src="images/img_rag_grey.gif" alt="grey" style="border:0px;">';
                                } else if (data == 'L') {
                                    return '<img src="images/img_rag_red.gif" alt="red" style="border:0px;">';
                                } else if (data == 'D') {
                                    return '<img src="images/img_rag_amber.gif" alt="amber" style="border:0px;">';
                                } else if (data == 'O') {
                                    return '<img src="images/img_rag_green.gif" alt="green" style="border:0px;">';
                                } else if (data == 'S') {
                                    return '<img src="images/img_s.gif" alt="s" style="border:0px;">';
                                }
                            }
                        }, {
                            "mData": "First Name",
                            "sDefaultContent": "",
                            "sWidth": "8em;",
                            "sClass": "pri"
                        }

                        ]

                    });

                    oTable.fnDraw();

                }
            }
        });


    });

});

As you can see I am trying to draw the datatable after retrieving the data in a ajax call on the click of a button. I am able to see the data being retrieved in the browser console and can see the json array of data in the network browser console. However DataTable does not render or draw the data. I tried the fnDraw but that doesnt work either. However it does show the message "Yahooo and Hotmail .." when there is no data found or 0 records. Additionally when I send back -1 it does execute the if condition as well in the success method.

I am not sure why its not rendering the columns. Any help will be appreciated. I am using Datatables 1.10.0

score 0 · Answer 1 · edited May 23 '17 at 11:53

0

let's give a try

oTable = $j('#jqueryDataTable').DataTable(...)

instead of

oTable = $j('#jqueryDataTable').dataTable(...)

and

oTable.draw();

see this and this

edited May 23 '17 at 11:53

Community

1
1

answered Oct 26 '15 at 12:02

asdf_enel_hak

7,474
5
42
84

I tried that. Same result. Not sure why it is not able to use the data in the aaData and draw\display the table. It does get the iTotalRecords and iDisplayRecords populated as well. – Aman Mohammed Oct 26 '15 at 12:12

Drawing DataTables in Ajax Success function

1 Answers1