JQuery DataTable не показывает данные по умолчанию

Question

У меня есть JQuery DataTable как

HTML страницы

<div id="content"> 
</div> 

кода расслоение плотной

(function ($) { 
    'use strict'; 

    var module = { 

     addTable: function() { 

      var output = '<table id="table1"></table>'; 
      $('#content').append('<p></p>' + output); 
      var data = []; 
      data = this.getData(); 

      $('#table1').dataTable({ 

       "data": data, 
       "columns": [ 

       { 
        "title": 'Name', 
        mDataProp: 'name', 
        width: '20%' 
       }, 
       { 
        "title": 'Company', 
        mDataProp: 'company' 
       }, 
       { 
        "title": 'Salary', 
        mDataProp: 'salary' 
       }], 

        'scrollY': '400px', 
        'scrollCollapse': false, 
        'paging': false 
      }); 
     }, 

     getData: function() { 

      var arr = []; 

      for (var i = 0; i < 100; i++) { 
        var obj = { 

        name: 'John', 
        company: 'XYZ', 
        salary: '$XYZ' 

       }; 

       arr.push(obj); 
      } 

      return arr; 
     } 
    }; 

    $(document).ready(function() { 

     $('#content').append('Loading....'); 
     module.addTable(); 

    }); 
})(jQuery); 

На начальной загрузки, он показывает пустую таблицу. Данные поступают после выполнения поиска. Как показать данные по умолчанию при начальной загрузке?

Answer 1

Это связано с асинхронностью javascripts. getData() не завершен во время инициализации dataTable. Вы можете сделать некоторый рефакторинг, поэтому getData вызывает вместо этого addTable.

var module = { 
     addTable: function (data) { 
      var output = '<table id="table1"></table>'; 
      $('#content').append('<p></p>' + output); 
      $('#table1').dataTable({ 
       "data": data, 
       "columns": [ 
       { 
        "title": 'Name', 
        mDataProp: 'name', 
        width: '20%' 
       }, 
       { 
        "title": 'Company', 
        mDataProp: 'company' 
       }, 
       { 
        "title": 'Salary', 
        mDataProp: 'salary' 
       }], 
        'scrollY': '400px', 
        'scrollCollapse': false, 
        'paging': false 
      }); 
     }, 

     getData: function (callback) { 
      var arr = []; 
      for (var i = 0; i < 100; i++) { 
        var obj = { 
        name: 'John', 
        company: 'XYZ', 
        salary: '$XYZ' 
       }; 
       arr.push(obj); 
      } 
      return callback(arr); 
     }, 

     init : function() { 
      this.getData(this.addTable); 
     } 
    }; 

...

module.init(); 

init() звонки getData(callback) с addTable, как пары, addTable имел пары data добавили.

демо ->http://jsfiddle.net/bLzaepok/

Я предполагаю, что ваш код GetData только на примере, и вы используете AJAX (или любой другой) IRL. Вызов функции обратного вызова в функцию обратного вызова:

getData: function (callback) { 
    $.ajax({ 
     ... 
     success : function(data) { 
      callback(data); 
     } 
    }); 
}