Question

我有一个jquery DataTable

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

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

Answer 1

这是由于javascripts异步性。在dataTable初始化时，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。

演示 - ＆gt;的 http://jsfiddle.net/bLzaepok/

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

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

jQuery dataTable默认不显示数据

1 个答案: