AngularJS(十六) 分页查询

搜索面板

<!--bread 面包屑 回显选中查询条件-->
            <div class="bread">
                <ul class="fl sui-breadcrumb">
                    <li><a href="#">全部结果</a></li>
                </ul>
                <ul class="tags-choose">
                    <li class="tag" ng-if="searchMap.category!=''"
                        ng-click="removeSearchItem('category')">商品分类：{{searchMap.category}}<i
                        class="sui-icon icon-tb-close"></i></li>
                    <li class="tag" ng-if="searchMap.brand!=''"
                        ng-click="removeSearchItem('brand')">品牌：{{searchMap.brand}}<i
                        class="sui-icon icon-tb-close"></i></li>
                    <li class="tag" ng-if="searchMap.price!=''"
                        ng-click="removeSearchItem('price')">价格：{{searchMap.price}}<i
                        class="sui-icon icon-tb-close"></i></li>
                    <li class="tag" ng-repeat="(key,value) in searchMap.spec"
                        ng-click="removeSearchItem(key)">{{key}}:{{value}}<i
                        class="sui-icon icon-tb-close"></i></li>
                </ul>
                <form class="fl sui-form form-dark">
                    <div class="input-control control-right">
                        <input type="text" /> <i class="sui-icon icon-touch-magnifier"></i>
                    </div>
                </form>
                <div class="clearfix"></div>
            </div>

品牌栏

<div class="fl key brand">品牌</div>
    <div class="value logos">
        <ul class="logo-list">
            <a href="#" ng-click="addFilterCondition('brand','苹果')"><li><img
                    src="img/_/phone01.png" /></li></a>
            <a href="#" ng-click="addFilterCondition('brand','华为')"><li><img
                    src="img/_/phone02.png" /></li></a>
            <a href="#" ng-click="addFilterCondition('brand','oppo')"><li><img
                    src="img/_/phone03.png" /></li></a>
            ...
        </ul>
    </div>

价格栏

<div class="type-wrap">
        <div class="fl key">价格</div>
        <div class="fl value">
            <ul class="type-list">
                <li><a href="#" ng-click="addFilterCondition('price','0-500')">0-500元</a></li>
                <li><a href="#"
                    ng-click="addFilterCondition('price','500-1000')">500-1000元</a></li>
                <li><a href="#"
                    ng-click="addFilterCondition('price','1000-1500')">1000-1500元</a></li>
                <li><a href="#"
                    ng-click="addFilterCondition('price','1500-2000')">1500-2000元</a></li>
                <li><a href="#"
                    ng-click="addFilterCondition('price','2000-3000')">2000-3000元 </a></li>
                <li><a href="#" ng-click="addFilterCondition('price','3000-*')">3000元以上</a></li>
            </ul>
        </div>
</div>      

排序栏

<div class="navbar-inner filter">
    <ul class="sui-nav">
        <li class="active"><a href="#">综合</a></li>
        <li><a href="#">销量</a></li>
        <li><a href="#" ng-click="addSort('updatetime','DESC')">新品</a></li>
        <li><a href="#">评价</a></li>
        <li><a href="#" ng-if="searchMap.sort =='DESC' "
                                ng-click="addSort('price','ASC')"> 价格↑</a></li>
        <li><a href="#" ng-if="searchMap.sort =='ASC' "
                                ng-click="addSort('price','DESC')">价格↓</a></li>
    </ul>
</div>

分页工具栏

<div class="fr page">
        <div class="sui-pagination pagination-large">
            <ul>
                <!-- 上一页 ：
                    ng-click="queryForPage(searchMap.currPage-1)" ：点击跳转到本页减1页
                    {{searchMap.currPage==1?'disabled':''}} ： 如果为第一页，上一页css样式为不可用
                -->
                <li class="prev {{searchMap.currPage==1?'disabled':''}}">
                <a href="#" ng-click="queryForPage(searchMap.currPage-1)">«上一页</a>
                </li>
                <!-- 若前面有更多页码，显示前面的 ...  -->
                <li class="dotted" ng-if="searchMap.currPage<=3?false:true"><span>...</span></li>

                <!-- 索引页码 ：
                     ng-repeat="p in pageLabel" ：循环显示索引页
                     ng-click="queryForPage(p)" ：点击跳转到目标页
                     {{p == searchMap.currPage?'active':''}}  ：设置当前页为选中样式
                -->
                <li ng-repeat="p in pageLabel" class="{{p == searchMap.currPage?'active':''}}">
                    <a href="#" ng-click="queryForPage(p)">{{p}}</a>
                </li>

                <!-- 若后面有更多页码，显示后面的 ...  -->
                <li class="dotted" ng-if="searchMap.currPage>=searchResult.totalPage-2?false:true">
                    <span>...</span>
                </li>

                <!-- 下一页 ：
                    ng-click="queryForPage(searchMap.currPage-1)" ：点击跳转到本页加1页
                    {{searchMap.currPage==searchResult.totalPage?'disabled':''}} 
                                                                                                   ： 如果为尾页，下一页css样式为不可用
                -->
                <li class="next {{searchMap.currPage==searchResult.totalPage?'disabled':''}}">
                    <a href="#" ng-click="queryForPage(searchMap.currPage+1)">下一页»</a>
                </li>
            </ul>
            <div>
                <span>共{{searchResult.totalPage}}页&nbsp;</span>
                <span> 到第 <input type="text" ng-model="searchMap.currPage" class="page-num"> 页
                <button class="page-confirm" ng-click="search()">确定</button></span>
            </div>
        </div>
    </div>

控制层方法

//控制层 
app.controller('searchController', function($scope, $controller, $location,
        searchService) {

    /**
     * 初始化查询对象，及其参数
     */
    $scope.searchMap = {
        keywords : '',
        brand : '',
        category : '',
        price : '',
        spec : {},
        updatetime : '',
        sortField : '',
        sort : "ASC",
        currPage : 1,
        pageSize : 5
    };

    /**
     * 初始化查询结果对象
     */
    $scope.searchResult = {};

    /**
     * 1、搜索的方法
     */
    $scope.search = function() {
        // 1.通过$location服务，获取跳转携带的查询关键字参数
        var keywords = $location.search()["keywords"];
        // 2.设置为主查询条件
        if (keywords != null && keywords != "") {
            // 添加关键字作为查询条件
            $scope.searchMap.keywords = keywords;
        };

        // 3.判断是否有分页，如果有，将html页面字符串页码 转为int类型
        if ($scope.searchMap.currPage != null
                && $scope.searchMap.currPage != '') {

            $scope.searchMap.currPage = parseInt($scope.searchMap.currPage);
        };
        // 4.调用服务查询数据
        searchService.search($scope.searchMap).success(function(data) {
            //5.将数据赋值给结果集
            $scope.searchResult = data;

            //6、构建分页角标数组
            $scope.buildPageLabel();
        });



    };
    /**
     * 2.设置过滤条件
     */
    $scope.addFilterCondition = function(key, value) {
        // 1、如果是普通字段
        if (key == "brand" || key == "category" || key == "price") {
            $scope.searchMap[key] = value;
        // 2、如果是规格字段
        } else {
            $scope.searchMap.spec[key] = value;
        }

        // 3、调用查询方法
        $scope.search();
    };

    /**
     * 3、删除过滤条件
     * 
     */
    $scope.removeSearchItem = function(key) {
        // 1、如果是普通字段
        if (key == "brand" || key == "category" || key == "price") {
            $scope.searchMap[key] = '';
        // 2、 如果是规格字段
        } else {

            delete $scope.searchMap.spec[key];
        }

        // 3、调用查询方法
        $scope.search();
    };

    /**
     * 4、添加排序条件
     * 
     */
    $scope.addSort = function(sortField, sort) {
        // 1、添加排序条件
        $scope.searchMap.sortField = sortField;
        $scope.searchMap.sort = sort;
        // 2、重新查询
        $scope.search();
    };




    /**
     * 5、添加分页条件
     * 
     */
    $scope.queryForPage = function(page) {

        // 1.如果当前页小与1或则大于最大页码不能跳转
        if (page < 1 || page > $scope.searchResult.totalPage) {
            return;
        };
        // 2. 否则、添加分页条件
        $scope.searchMap.currPage = page;
        // 3、重新查询
        $scope.search();

    };

    /**
     * 6、定义方法,构造分页数组角标 1,2,3,.......
     * 
     */
    $scope.buildPageLabel = function() {
        // 1、定义分页变量
        // 1.1页码角标数组
        $scope.pageLabel = [];
        // 1.2起始角标
        $scope.firstPage = 1;
        // 1.3结束页角标
        $scope.lastPage = $scope.searchResult.totalPage;
        // 1.4当前页码
        var page = $scope.searchMap.currPage;


        // 2.1 如果小于5页，显示前5页
        if ($scope.searchResult.totalPage < 5) {
            $scope.lastPage = page;
        // 2.2 否则，设置首尾页
        } else {
            // 2.2.1 如果是本页是前3页，显示前5页
            if (page <= 3) {
                // 设置起始页
                $scope.firstPage = 1;
                $scope.lastPage = 5;
            //2.2.2 如果是后3页,显示后5页
            }else if (page >= $scope.searchResult.totalPage - 2) {
                $scope.lastPage = $scope.searchResult.totalPage-4;
                $scope.lastPage = $scope.searchResult.totalPage;
            //2.2.3 否则，动态显示为本页，前2页 到 后2页    
            }else{
                $scope.firstPage = page - 2;
                $scope.lastPage = page + 2;
            }

        }

        // 3、将首位页，添加页码集合
        for (var i = $scope.firstPage; i <= $scope.lastPage; i++) {
            $scope.pageLabel.push(i);
        };

    };


});

服务

//服务层
app.service('searchService',function($http){

    //搜索
    this.search=function(searchMap){
        return $http.post('../itemSearch/search',searchMap);
    }   

});