我创建了一个运行MySQL查询的报告应用程序,并将数据(30k行)返回给Angular JS。如果我限制行数,则数据会快速加载到HTML表中,但是当要显示30k行时,数据会挂起。
HTML代码段 -
<tbody class="tbody-class">
<tr ng-repeat="patching in main_data_table.message | filter: (!disableFilter || '') && {uaid: searchText}" ng-if="searchText.indexOf(',')==-1">
<td class="table-row-text">{{ patching.server_name}}</td>
<td class="table-row-text">{{ patching.uaid}}</td>
<td class="table-row-text">{{ patching.environment}}</td>
<td class="table-row-text">{{ patching.is_disruptive}}</td>
<td class="table-row-text">{{ patching.is_disruptive}}</td>
<td class="table-row-text">{{ patching.tz_name}}</td>
<td class="table-row-text">{{ patching.start_time}}</td>
<td class="table-row-text">{{ patching.end_time}}</td>
<td class="table-row-text">{{ patching.validator_group}}</td>
<td class="table-row-text">{{ patching.patching_group}}</td>
<td class="table-row-text">{{ patching.patching_criteria}}</td>
<td class="table-row-text">{{ patching.patching_documentation_link}}</td>
</tr>
控制器代码段 -
patchingApp.controller('patchingController', function ($scope, $state, patchingServices, $timeout) {
'use strict';
$scope.searchText = '';
$scope.main_data_table = patchingServices.getPatchingReport().get();
function getDownloadName(){
var d = new Date();
var date = d.getDate() + "" + (d.getMonth() + 1) + "" +
d.getFullYear();
var fileName = "patching_" + date + ".csv";
return fileName;
}
function setDownloadAttribute() {
var a = document.getElementById("fileLink");
a.setAttribute("download", getDownloadName())
}
var a = document.getElementById("fileLink");
a.onclick = setDownloadAttribute;
});
patchingApp.filter('fill', function() {
return function(input,val) {
if(val!=''){
var out=[];
var filterVal = val.split(",");
if (filterVal.length > 1) {
for (var i = 0; i < filterVal.length; i++) {
for(var j=0;j<input.length;j++){
if (input[j].uaid == filterVal[i]) {
console.log("filter:"+filterVal[i]);
out.push(input[j]);
console.log("uaid"+input[j].uaid);
}
}
}
console.log(out);
return out;
}}}});