Question

Ho una DataTable jquery come

pagina html

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

js codice

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

Al caricamento iniziale, mostra una tabella vuota. I dati arrivano dopo aver eseguito una ricerca. Come mostrare i dati per impostazione predefinita sul carico iniziale?

Answer 1

Ciò è dovuto all'asincronia dei javascript. getData() non è terminato al momento dell'inizializzazione DataTable. Potresti effettuare alcuni refactoring, quindi getData invoca invece addTable come callback.

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() chiamate getData(callback) con addTable come param, addTable hanno avuto il parametro data aggiunto.

demo ->http://jsfiddle.net/bLzaepok/

presumo il codice getData è solo per esempio, e si utilizza AJAX (o qualsiasi altra cosa) IRL. Chiama la richiamata nel callback:

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