如何避免每次使用 ngtable 执行 sorting/paging 时从服务器加载数据

Question

我正在使用 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 为 table:

<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 条记录，每次我对 table 执行某些操作时，都需要 5 秒才能响应，这非常烦人。我如何让它只在第一次加载数据并将其缓存在客户端以供将来操作？

Answer 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());
                        });
                    }
                });

如何避免每次使用 ngtable 执行 sorting/paging 时从服务器加载数据

How to avoid loading data from server every time doing sorting/paging with ngtable

sorting

ajax

paging

angularjs

ngtable