Question

我在HTML表格中有一些数据。我必须使用分页显示表条目，我不知道如何使它工作。因为我是angularjs的初学者，所以教程很混乱。任何人都可以为此提供解决方案吗？的index.html 这是我显示表格的模板

<div ng-controller="productscontroller">

<div id="rows">
    Display:<input type="number" min=0 max=18 size=1 ng-model="rowstolimit" />
</div>
<div>
    <table class="table">
        <thead>
            <tr><b>
                <td><b>Product_id</b></td>
                <td><b>Product_name</b></td>
                <td><b>Highest_bid</b></td>
                <td><b>Bid_expiry_date</b></td>
                <td><b>Less_than_one_day</b></td>
                <td><b>Demand_price</b></td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="product in details.productData.products | limitTo:rowstolimit">
                <td>{{product.product_id}}</td>
                <td>{{product.product_name}}</td>
                <td>{{product.highest_bid}}</td>
                <td>{{product.bid_expiry_date}}</td>
                <td>{{product.less_than_one_day}}</td>
                <td>{{product.demand_price}}</td>
            </tr>
        </tbody>
    </table>
</div>

controller.js 在这里，我使用featuredeals服务从API获取详细信息

var app = angular.module("myapp", ['ngRoute']);
app.controller("productscontroller", function($scope, $http, featuredeals, $location, $log) {
$scope.details = {
    productData: []
}
featuredeals.processString()
    .then(function(response) {
            console.log(response);
            $scope.details.productData = response.data.data;
        },
        function(reason) {
            console.log(reason);
            $log.info(reason.data);
        });
        });

Answer 1

由于您是初学者，我不希望您复制答案。请尝试以下步骤。

假设没有Ajax请求。

列表项
维护此变量skipCount，limit，totalCount，pageCount。
假设您的totalCount为100，并且您希望显示10个数据，因此您的pageCount将为totalCount / limit，在这种情况下为10。
维护两个阵列一个用于所有产品数据，另一个用于您将重复的产品数据。
当用户在控制器中更改页面调用功能并传递pagenumber时。在控制器中 - 假设用户已选择页码6.

skipCount = pageNumber * limit（这里按照例如60.）

所以现在你只需要更新你的显示阵列60到70个数据。您将更新数组angular的那一刻将运行检测周期，这将更新DOM。

Answer 2

如果你想要分页，其中一种方法是在服务器端实现它，并通过将页码作为参数传递来进行API调用。在UI上只需创建一些按钮即可导航到特定页面并传递API调用的页码。这是最好的方法，因为我们不是一次性获取数据。您可以使用ng-grid，ui-grid等角度库来利用分页功能。

html表条目的角度js中的分页

2 个答案: