Question

ich jquery Datatable haben als

HTML-Seite

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

js Code

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

Auf Anfangslast, zeigt es eine leere Tabelle. Die Daten kommen nach einer Suche. Wie werden die Daten standardmäßig beim erstmaligen Laden angezeigt?

Answer 1

Dies ist wegen Javascript asynchronicity. getData() ist zum Zeitpunkt der Initialisierung der Datentabelle nicht beendet. Sie könnten ein Refactoring durchführen, daher ruft getDataaddTable als Callback auf.

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() Anrufe getData(callback) mit addTable als param haben addTable die param hatte data hinzugefügt.

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

Ich gehe davon aus Ihrem getData Code nur pro Beispiel ist, und Sie sind mit AJAX (oder was auch immer) IRL. Rufen Sie den Rückruf in den Rückruf:

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