我正在使用ngtable(1.0.0)来显示从服务器端获取的记录。我的控制器js看起来像这样:
ristoreApp.controller("fmCtrl",
['$scope', '$filter', 'fmFactory', 'NgTableParams', function($scope, $filter, fmFactory, NgTableParams) {
var self = this;
$scope.selection = '0';
$scope.fmSearch = function () {
if ($scope.selection == '0') {
self.tableParams = new NgTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
frReportId: 'asc'
}
}, {
getData: function (params) {
return fmFactory.getAll()
.then(function(response) {
var reports = response.data;
params.total(reports.length);
console.log(params.total());
var sorted = params.sorting() ? $filter('orderBy')(reports, params.orderBy()) : reports;
return sorted.slice((params.page() - 1) * params.count(), params.page() * params.count());
});
}
});
}
}
}]
)
表格的HTML:
<div ng-controller="fmCtrl as fm">
<div class="container">
<div class="row top-margin-80">
<div class="col-md-12">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" ng-model="keyword" placeholder="Enter MRN or report ID" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Search by</label>
<select class="form-control" ng-model="selection">
<option value="0" selected>All Reports</option>
<option value="1" >MRN</option>
<option value="2">ReportID</option>
</select>
</div>
<div class="form-group">
<input class="form-control" type="text" ng-model="optionword" ng-hide="selection == '0'"/>
</div>
</form>
</div>
</div>
<button type="button" class="btn btn-primary" ng-click="fmSearch()"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<table ng-table="fm.tableParams" class="table table-bordered table-striped table-condensed" show-filter="false">
<tr ng-repeat="report in $data">
<td data-title="'ReportId'" filter="{frReportId: 'text'}" sortable="'frReportId'" class="text-center">
{{report.frReportId}}</td>
<td data-title="'BlockId'" filter="{frBlockId: 'text'}" sortable="'frBlockId'" class="text-center">
{{report.frBlockId}}</td>
<td data-title="'MRN'" filter="{mrn: 'text'}" sortable="'mrn'" class="text-center">
{{report.mrn}}</td>
<td data-title="'Name'" filter="{frFullName: 'text'}" sortable="'frFullName'" class="text-center">
{{report.frFullName}}</td>
<td data-title="'Diagnosis'" filter="{frDiagnosis: 'text'}" sortable="'frDiagnosis'" class="text-center">
{{report.frDiagnosis}}</td>
<td data-title="'File'" class="text-center"><a ng-href="{{report.filepath}}">{{report.frReportId}}.xml</a>
</td>
</tr>
</table>
</div>
</div>
它很有效。问题是每当我点击要排序和页面的标题按钮转到下一页时,它会对服务器进行ajax调用以再次检索数据。我在数据库中有超过2000条记录,每次我对表做一些事情,响应需要5秒钟,这非常烦人。如何在第一次加载数据并将其缓存在客户端以供将来操作?
答案 0 :(得分:1)
终于开始工作了。解决方案是将ajax调用var Ajax = fmFactory.getAll();
移到ngtable构造函数之外。
var Ajax = fmFactory.getAll();
self.tableParams = new NgTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
frReportId: 'asc'
}
}, {
getData: function (params) {
return Ajax.then(function(response) {
var reports = response.data;
params.total(reports.length);
console.log(params.total());
var sorted = params.sorting() ? $filter('orderBy')(reports, params.orderBy()) : reports;
return sorted.slice((params.page() - 1) * params.count(), params.page() * params.count());
});
}
});