jQuery dataTable not showing data by default

Question

I have a jquery DataTable as

html page

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

On initial load, it shows an empty table. Data comes after performing some search. How to show the data by default on initial load?

Answer 1

This is due to javascripts asynchronicity. getData() is not finished at the time of the dataTable initialization. You could make some refactoring, so getData invokes addTable as a callback instead.

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() calls getData(callback) with addTable as param, addTable have had the param data added.

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

I assume your getData code is only per example, and you are using AJAX (or whatever) IRL. Call the callback in the callback :

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