Рисование DataTables в функции Ajax успеха

Question

Это мой код:

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(); 

       } 
      } 
     }); 


    }); 

}); 

Как вы можете видеть, что я пытаюсь сделать DataTable после получения данных в Ajax вызова на нажатие кнопки. Я могу видеть, что данные извлекаются в консоли браузера и могут видеть json-массив данных в консоли сетевого браузера. Однако DataTable не отображает и не выводит данные. Я попробовал fnDraw, но это тоже не работает. Однако он не показывает сообщение «Yahooo и Hotmail ..», когда нет данных или 0 записей. Кроме того, когда я отправляю обратно -1, он выполняет условие if также в методе успеха.

Я не уверен, почему его не отражают столбцы. Любая помощь будет оценена. Я использую DataTables 1.10.0

Answer 1

давайте дадим попробовать

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

вместо

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

и

oTable.draw();

см this и this