Question

द्वारा डेटा नहीं दिखाई दे रहा मैं के रूप में

html पृष्ठ

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

js कोड

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

प्रारंभिक लोड पर एक jQuery DataTable है, यह एक खाली तालिका को दर्शाता है। कुछ खोज करने के बाद डेटा आता है। प्रारंभिक लोड पर डिफ़ॉल्ट रूप से डेटा कैसे दिखाएं?

Answer 1

यह जावास्क्रिप्ट asynchronicity के कारण है। getData() डेटाटेबल प्रारंभिक समय के समय समाप्त नहीं हुआ है। आप कुछ रिफैक्टरिंग कर सकते हैं, इसलिए 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); 
     } 
    }); 
}