我正在尝试在jquery数据表中显示数据,但由于某种原因,我看到一半记录的背景图像。如果我点击任意列中的排序图标,此图像就会消失并且网格会恢复正常。
注意:我使用的是dataTables.scroller.js扩展名。
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();
});
问题
如何将数据加载到网格中并使其顺利运行,即使是第一次?