title: Drawing DataTables in Ajax Success function
body: <p>This is my code:</p>
  
  <pre><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&lt;"clear"&gt;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 '&lt;img src="images/blank.gif" style="border:0px;"&gt;';
                                  } 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 '&lt;img src="images/img_rag_grey.gif" alt="grey" style="border:0px;"&gt;';
                                  } else if (data == 'L') {
                                      return '&lt;img src="images/img_rag_red.gif" alt="red" style="border:0px;"&gt;';
                                  } else if (data == 'D') {
                                      return '&lt;img src="images/img_rag_amber.gif" alt="amber" style="border:0px;"&gt;';
                                  } else if (data == 'O') {
                                      return '&lt;img src="images/img_rag_green.gif" alt="green" style="border:0px;"&gt;';
                                  } else if (data == 'S') {
                                      return '&lt;img src="images/img_s.gif" alt="s" style="border:0px;"&gt;';
                                  }
                              }
                          }, {
                              "mData": "First Name",
                              "sDefaultContent": "",
                              "sWidth": "8em;",
                              "sClass": "pri"
                          }
  
                          ]
  
                      });
  
                      oTable.fnDraw();
  
                  }
              }
          });
  
  
      });
  
  });
  </code></pre>
  
  <p>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. </p>
  
  <p>I am not sure why its not rendering the columns. Any help will be appreciated. I am using Datatables 1.10.0</p>