在角度js表中添加分页[重复]

Posted 2023-03-10

【中文标题】在角度js表中添加分页[重复]

【英文标题】：Adding pagination in angular js table [duplicate]

【发布时间】：2017-03-28 02:27:07

【问题描述】：

我有下表：

<div class="container-fluid">

                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th>Action Date</th>
                                        <th>Action Taken</th>
                                        <th>Problem</th>
                                        <th>Status</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="contact in customer.contactHistory">
                                        <td>contact.actionDate</td>
                                        <td>contact.actionTaken</td>
                                        <td>contact.problem</td>
                                        <td>contact.status</td>
                                    </tr>
                                    </tbody>

                                </table>

                            </div>

如何在其中添加分页？我有一个单独的 js 控制器文件。我想添加分页，这样页面加载时只有 10 行可见。

【参考方案1】：

如下创建 Pagination.js 作为 Angular 服务，它可能需要您在自己的代码中实现。

var app = angular.module('qaApp');
app.factory("paginationService", function($location) 
    /**
     * Create a Pagination object
     * @type 
     */
    var obj = ;
    var url = $location.absUrl().split('/')[0];

    obj.pages = [];

    /*if(url == 'test')
        obj.url = "/design/views/paginationtest.html";
    else
        obj.url = "/design/views/pagination.html";
    */
    /* pagination view url (html fragment */
    obj.url = "/views/pagination.html";
    obj.newUrl = "/views/pagination-new.html";

    /* the last page */
    obj.lastPage = 1;
    /* the current page */
    obj.currentPage = 1;
    /* per page size */
    obj.perPage = 1;
    /* total records */
    obj.totalRecords = 1;
    /* record from */
    obj.from = 0;
    /* record to */
    obj.to = 1;
    /* set all the variable from the api */
    obj.set = function(data) 
        if(data) 
            obj.lastPage = data.last_page;
            obj.currentPage = data.current_page;
            obj.perPage = data.per_page;
            obj.totalRecords = data.total;
            obj.from = data.from;
            obj.to = data.to;
            /* enable/disable the next button */
            if(obj.currentPage == obj.lastPage) obj.nextDisabled = true;
            else obj.nextDisabled = false;
            /* enable/disable the previous button */
            if(obj.currentPage == 1) obj.previousDisabled = true;
            else obj.previousDisabled = false;
            obj.setPages();
        
    ;
    obj.reset = function() 
        obj.lastPage = false;
        obj.currentPage = 1;
        obj.perPage = 1;
        obj.totalRecords = 0;
        obj.from = 0;
        obj.to = 1;
        obj.nextDisabled = true;
        obj.previousDisabled = true;
        obj.setPages();
    ;
    obj.next
    /* travel to the next page */
    obj.loadNext = function(loadAPIData) 
        obj.currentPage +=1;
        loadAPIData(obj.currentPage);
    ;

    obj.loadPage = function(loadAPIData, pageNo)
         obj.currentPage = pageNo;
        loadAPIData(obj.currentPage);
    
    /* travel to the previous page */
    obj.loadPrevious = function(loadAPIData) 
        if(obj.currentPage == 1)
            return;
        
        obj.currentPage -=1;
        loadAPIData(obj.currentPage);
    ;
    /* travel to the last page */
    obj.loadLast = function(loadAPIData) 
        obj.currentPage = obj.lastPage;
        loadAPIData(obj.currentPage);
    ;
    /* travel to the first page */
    obj.loadFirst = function(loadAPIData) 
        obj.currentPage = 1;
        loadAPIData(obj.currentPage);
    ;
    /* if next button is enabled */
    obj.nextDisabled = true;
    /* if previous button is enabled */
    obj.previousDisabled = true;
    /* Code Added for Pagination with Numbering*/
    obj.setPages = function () 

        var pages = [];
        totalPage = Math.ceil(obj.totalRecords  / obj.perPage);
        var startPage = obj.currentPage;
        var endPage = totalPage;
        if(obj.currentPage > 3) 
            startPage = obj.currentPage - 3;
           //pages.push('class': '' , 'pageNo' : 1 , 'label' : "<<");
        
        if(totalPage > obj.currentPage + 3)
            endPage = obj.currentPage + 3;
        
        for (var i = startPage; i <= endPage; i++) 
            if (i == obj.currentPage) 
                pages.push('class': 'active' , 'pageNo' : i, 'label' : i);
             else 
                pages.push('class': '', 'pageNo' : i , 'label' : i);
            
        

        obj.pages = pages;
    ;

    /* return the pagination object */
    return obj;
);

这里是显示分页 UI 的 Html，如下所示

<div >
        <div class="slide-animate" ng-include="pagination.url"></div>
    </div>

【讨论】：

我必须将 div 添加到我的 html 中吗？

是的，只需包含此 html 并包含适当的模型，例如分页等。

当我在表中添加 ng-include="pagination.url" 时，它没有显示我的数据 跨度>