Question

我想启用分页，我在客户端和服务器端分页之间徘徊。从长远来看（更多数据）可能更好的做服务器端分页，但我还没有找到一个很好的教程。

我使用Angular / Express / Mongo。我正在使用Boostrap UI，并希望使用他们的分页指令进行分页。我已经阅读了一些关于如何做到这一点的清晰度，但它们已经过时，我无法让它发挥作用。 http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/paginating-through-client-side-data.html

有人可以帮助我让这个例子与Angular的Bootstrap UI一起使用吗？

Answer 1

如果每页有一定数量的项目，您可以这样做：

定义角度服务以查询服务器上的数据。

.factory('YourPaginationService', ['$resource',
    function($resource) {
        return $resource('baseUrl/page/:pageNo', {
            pageNo: '@pageNo'
        });
    }
]);

通过角度控制器调用它。不要忘记在全球或控制器中注入您的服务。

$scope.paginationController = function($scope, YourPaginationService) {

    $scope.currentPage = 1;

    $scope.setPage = function (pageNo) {
        $scope.currentPage = pageNo;
        YourPaginationService.query({
            pageNo: '$scope.currentPage'
        });
    };

};

在快递4（如果有的话）上，设置你的路线。

app.route('/articles/page/:pageNo')
    .get(data.listWithPagination) //random function name

然后，您需要在Node控制器中使用所需的Mongo请求连接该函数。如果你有Mongoose，它的工作原理如下：

exports.listWithPagination = function(req, res) {
    var pageLimit = x;    //Your hardcoded page limit
    var skipValue = req.params.pageNo*pageLimit;
    YourModel.find() //Your Mongoose model here, if you use Mongoose.
    .skip(skipValue)
    .limit(pageLimit)
    .exec(function(err, data) {
        if (err) {
            return res.send(400, {
                message: getErrorMessage(err)
            });
        } else {
            res.jsonp(data);
        }
    });
};

我将如何在典型的MEAN堆栈上执行此操作。如果您正在使用不同的库/技术，则可能需要调整一些内容。

Angular UI客户端分页

1 个答案: