html表格条目的角度js中的分页答案

【问题标题】：Pagination in angular js for html table entrieshtml表格条目的角度js中的分页
【发布时间】：2018-07-13 19:49:58
【问题描述】：

我在 HTML 表中有一些数据。我必须使用分页显示表格条目，但我不知道如何使它工作。一些教程令人困惑，因为我是 angularjs 的初学者。谁能为此提供解决方案？索引.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 在这里，我使用 featureseals 服务从 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);
        });
        });

【问题讨论】：

Smart Table 是一个很好的指令，可以解决本地和远程分页问题。 lorenzofox3.github.io/smart-table-website

标签： javascript angularjs html-table pagination

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

假设没有 Ajax 请求。

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

skipCount = pageNumber * 限制（此处为 60，例如）

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

【讨论】：