jQuery Datatable无法正确呈现数据

时间:2016-07-19 19:46:05

标签: jquery typescript datatables

我正在尝试在jquery数据表中显示数据,但由于某种原因,我看到一半记录的背景图像。如果我点击任意列中的排序图标,此图像就会消失并且网格会恢复正常。

注意:我使用的是dataTables.scroller.js扩展名。

enter image description here

HTML:

    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">Report 1</h3>
        </div>
        <div class="panel-body">
            <table id="Report1" class="table table-striped table-bordered" width="100%">
                <thead>
                    <tr>
                        <th>Report 1 Info</th>
                        <th>Column 1</th>
                        <th>Column 2</th>
                        <th>Column 3</th>
                        <th>Column 4</th>
                        <th>Column 5</th>
                        <th>Column 6</th>
                        <th>Column 7</th>
                        <th>Column 8</th>
                        <th>Column 9</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

JS

class Report1Component {

    report1: any = $('#Report1');    

    public ShowGrid() {

        this.report1.DataTable({
            deferRender: true,
            scrollY: 600,
            "scrollX": true,
            scrollCollapse: true,
            scroller: true,
            columns: [
                { data: "ReportData" },
                { data: "Column1" },
                { data: "Column2" },
                { data: "Column3." },
                { data: "Column4" },
                { data: "Column5" },
                { data: "Column6" },
                { data: "Column7" },
                { data: "Column8" },
                { data: "Column9" }
            ]
        });
    }

    public LoadData() {

        var instance = this;

        instance.report1.dataTable().fnClearTable();

        $.when(Report1Service.GetData())
            .done(function (response) {

                instance.report1.dataTable().fnAddData(response);            

            }).always(function () {

                instance.report1.dataTable().fnDraw();

            });
    }
}

$(function () {
    var report1Component = new Report1Component();

    report1Component.ShowGrid();

    report1Component.LoadData();

});

问题

如何将数据加载到网格中并使其顺利运行,即使是第一次?

0 个答案:

没有答案