jQuery dataTable默认不显示数据

Question

我有一个jquery DataTable

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

在初始加载时,它显示一个空表.执行一些搜索后会出现数据.如何在初始加载时默认显示数据？

Answer 1

这是由于 javascript 的异步性造成的。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()使用as 参数调用，getData(callback)已添加参数。addTableaddTabledata

演示 -> http://jsfiddle.net/bLzaepok/

我假设您的 getData 代码只是每个示例，并且您正在使用 AJAX （或其他）IRL。在回调中调用回调：

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