韩震博客|关注于学习java&php与交流

angularJs+bootStrap 分页功能实现

admin 2018年01月22日 web前端 521 0
后台处理层
@RequestMapping("search")
    public ResponseEntity<PageInfo<SalesReturnRequest>> search(@RequestBody SearchVO searchVO) {
        searchVO.setSearchCode(getCurrentEmployeeCode());
        PageInfo pageInfo = salesReturnRequestService.search(searchVO);
        return new ResponseEntity<>(pageInfo, HttpStatus.OK);
    }
public PageInfo<SalesReturnRequest> search(SearchVO searchVO) {
        PageHelper.startPage(searchVO.getPageNum(), searchVO.getPageSize());
        List<SalesReturnRequest> salesReturnRequests = salesReturnRequestMapper.search(searchVO);
        return new PageInfo<>(salesReturnRequests);


    jsp页面

<div class="col-xs-12 table-page p-t-10 pagenation-banner"
     ng-show="salesReturnRequestList.length>0">
    <pagenation data-pages="pages" data-page-num="pageNum"/>
</div>

 js页面
angular.module('pagenation', []).directive('pagenation', function () {
    return {
        scope: {
            pageNum: '=',
            pages: '='
        },
        restrict: 'E',
        replace: true,
        template: "<div class='col-sm-12'><ul class='pagination pull-right'>" +
        "<li class='paginate_button'><a ng-click='changePage(1)'>«</a><>" +
        "<li class='paginate_button disabled' ng-show='pageNum > 2'><a>…</a><>" +
        "<li ng-class='i==pageNum?\"paginate_button active\":\"paginate_button\"' ng-repeat='i in pageArray'>" +
        "<a ng-click='changePage(i)'>{{i}}</a>" +
        "<>" +
        "<li class='paginate_button disabled' ng-show='endNum < pages'><a>…</a><>" +
        "<li class='paginate_button'><a ng-click='changePage(pages)'>»</a><>" +
        "</ul></div>",
        link: function (scope) {
            var getPageArray = function (curPage, pages) {
                var array = new Array();
                if(!(curPage && pages)){
                    return array;
                }
                var startNum = 1;
                var endNum = 1;
                if (curPage > 1) {
                    startNum = curPage - 1;
                }
                if (curPage >= pages) {
                    endNum = pages;
                } else {
                    endNum = curPage + 1;
                }
                scope.endNum=endNum;
                for (var idx = startNum; idx <= endNum; idx++) {
                    array.push(idx);
                }
                return array;
            }
            scope.$watchCollection("pageNum + pages",function (v) {
                scope.pageArray = getPageArray(parseInt(scope.pageNum),parseInt(scope.pages));
            });
            scope.changePage = function (page) {
                scope.pageNum = page;
            }
        }
    };
});

如果有不懂的可以加我qq,一块交流

转载的时候记得写明出处哦!红色火线加油站!http://hongsehuoxian.com
看到这里如果这篇文章真的帮到你了,不妨打赏一下哦!

以上就是红色火线JAVA加油站整理的关于angularJs+bootStrap 分页功能实现的文章,
希望可以帮到你,如果你有不同的见解可以留言指正哦,避免让别的java小伙伴在走挫折路。
angularJs+bootStrap实现改变input框修改input背景色或者进度条效果
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信