分页条

类似于百度的分页条
    bosfore_app.controller("ctrlRead", ['$scope', '$http', function($scope, $http) {
    //当前页码
    $scope.currentPage = 1;
    //每页的显示数
    $scope.pageSize = 4;
    //总页数
    $scope.totalCount = 0;
    //总浏览数
    $scope.totalPages = 0;
    //上一页
    $scope.prev = function() {
        if($scope.currentPage > 1) {
            $scope.selectPage($scope.currentPage - 1);
        }
    }
    //下一页
    $scope.next = function() {
        if($scope.currentPage < $scope.totalPages) {
            $scope.selectPage($scope.currentPage + 1);
        }
    }
    //当前页
    $scope.selectPage = function(page) {
        // 如果页码超出范围
        if($scope.totalPages != 0) {
            if(page < 1 || page > $scope.totalPages) return;
        }

        $http({
            method: 'GET',
            url: 'promotion_pageQuery.action',
            params: {
                "page": page,
                "rows": $scope.pageSize
            }
        }).success(function(data, status, headers, config) {
            // 显示表格数据
            $scope.pageItems = data.pageData;
            // 计算总页数
            $scope.totalCount = data.totalCount;
            $scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);

            // 当前显示页,设为当前页
            $scope.currentPage = page;

            // 固定显示10页 (前5后4)
            var begin; //显示的第一页页码
            var end;//显示的最后一页页码

            begin = page - 5;
            if(begin < 0) {
                begin = 1;
            }

            end = begin + 9;
            if(end > $scope.totalPages) {
                end = $scope.totalPages;
            }

            begin = end - 9;
            if(begin < 1) {
                begin = 1;
            }

            $scope.pageList = new Array();
            for(var i = begin; i <= end; i++) {
                $scope.pageList.push(i);
            }
            
        }).error(function(data, status, headers, config) {
            // 当响应以错误状态返回时调用
            alert("出错,请联系管理员 ");
        });
    }

    $scope.isActivePage = function(page) {
        return page == $scope.currentPage;
    }

    // 发起请求 显示第一页数据
    $scope.selectPage($scope.currentPage);

}]);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在JSP中实现分页显示通常需要后端的支持,比如使用Servlet来处理分页逻辑,并将分页数据传递给JSP页面。下面是一个简单的分页显示分页的实现步骤: 1. 后端处理分页逻辑:首先,你需要在后端(通常是Servlet或者其他控制器)计算出分页信息,包括当前页码、总页数、每页显示的目数等。 2. 将分页信息传递给JSP:将计算好的分页信息作为Model数据传递给JSP页面。 3. 在JSP页面使用分页标签:你可以使用JSTL标签库中的`<c:forEach>`标签来遍历数据,并显示分页。为了实现分页,你可能需要自定义一个分页标签库或使用第三方的分页标签库,如 pagination标签库等。 以下是一个简单的示例代码,展示了如何在JSP中使用分页标签: ```jsp <%@ page import="java.util.List" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!-- 引入分页标签库,这里假设为mytags --> <%@ taglib uri="http://example.com/tags" prefix="mytags" %> <!-- 假设这是从后端获取的分页数据 --> <c:set var="currentPage" value="${param.page}" /> <c:set var="totalPages" value="${totalPages}" /> <c:set var="entriesPerPage" value="${entriesPerPage}" /> <!-- 分页显示 --> <div> <mytags:pagination firstPageOutcome="firstPageAction" lastPageOutcome="lastPageAction" previousPageOutcome="previousPageAction" nextPageOutcome="nextPageAction" currentPage="${currentPage}" totalPages="${totalPages}" entriesPerPage="${entriesPerPage}" /> </div> <!-- 数据遍历展示 --> <c:forEach items="${dataList}" var="data" varStatus="status"> <!-- 处理每数据的显示 --> <p>${status.index}: ${data.name}</p> </c:forEach> ``` 在这个例子中,`<mytags:pagination>` 是一个假设的分页标签,用于生成分页。你需要根据实际使用的标签库来调整这部分代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值