让知识连接你我
投稿赚钱
当前位置: 首页 > 前端开发 > angularjs分页教程-完成分页也并非非常难
  • 101
  • 微信分享

    扫一扫,在手机上查看

angularjs分页教程-完成分页也并非非常难

2019.09.17 10:00 258 浏览 举报

  angularjs很强的双向绑定,及其对SEO的不友好…临时让它必须在管理信息系统层面展露头角,而管理信息系统,一个很关键的模块便是分页了。angularjs完成分页也并非非常难。

  服务端源代码:

	getPaginationResult: function(obj, req, res, q) { // 通用查询,带分页,注意参数传递格式  
	var str = req.query.search,
		page = parseInt(req.query.page);  
	var limit = parseInt(req.query.limit);  
	if(!page) page = 1;  
	if(!limit) limit = 10;  
	var order = req.query.order;  
	var sq = {},
		Str, A = 'problemID',
		B = 'asc';  
	if(order) { //是否有排序请求
		  
		Str = order.split('_');  
		A = Str[0];
		B = Str[1];  
		sq[A] = B; //关联数组增加查询条件,更加灵活,因为A是变量
		  
	} else {  
		sq.date = -1; //默认排序查询条件
		  
	}  
	var startNum = (page - 1) * limit;  
	var resultList = obj.find(q).sort(sq).skip(startNum).limit(limit).find();   //        分页参数
	  
	var pageInfo = {  
		"totalItems": obj.find(q).count(),
		  "currentPage": page,
		  "limit": limit,
		  "startNum": startNum + 1  
	};  
	var datasInfo = {  
		docs: resultList,
		  pageInfo: pageInfo  
	}  
	return datasInfo;  
	}

  在这里表述了一个取数据的方式,能够传递排序和检索条件等主要参数,关键是根据向前端开发返回 pageInfo 数据来为分页查询做提前准备。

  前端开发显示信息:

<div class="text-center">
	<ul class="pagination pagination-centered">
		<li ng-class="{true:'disabled'}[currentPage==1]">
			<a href="javascript:void(0);" ng-click="prevPage()">上一页</a>
		</li>
		<li ng-repeat=" __vmodel__.page in __vmodel__.pages" ng-class=" {true :'active' }[__vmodel__.currentPage==__vmodel__.page]">
			<a href=" __vmodel__.javascript:void(0);" ng-click=" __vmodel__.loadPage(__vmodel__.page)">undefined</a>
		</li>
		<li ng-class="{true:'disabled'}[currentPage==totalPage]">
			<a href="javascript:void(0);" ng-click="nextPage()">下一页</a>
		</li>
	</ul>
</div>

  在这里是分页查询的显示信息,

  下边对分页查询做js实际操作,在这里是用以angularjs:

	angular.module("webApp", [])  .controller("content", function($scope, $http) {  
		$scope.currentPage = Number('<%=pageInfo.currentPage%>');  
		$scope.totalItems = Number('<%=pageInfo.totalItems%>');  
		$scope.limit = Number('<%=pageInfo.limit%>');  
		$scope.startNum = Number('<%=pageInfo.startNum%>');  
		$scope.totalPage = Math.ceil($scope.totalItems / $scope.limit);  
		$scope.pages = [];  
		var localUrl = "/<%=cateInfo.defaultUrl%>___<%=cateInfo._id%>";  
		initPagination($scope, $http, localUrl);  
	})

  下边是 initPagination方式

function initPagination($scope,$http,localUrl){
//        定义翻页动作
    $scope.loadPage = function(page){
        $scope.currentPage = page;
        window.location.href = localUrl + "-"+$scope.currentPage+".html";
    };
    $scope.nextPage = function () {
        if ($scope.currentPage < $scope.totalPage) {
            $scope.currentPage++;
            window.location.href = localUrl + "-"+$scope.currentPage+".html";
        }
    };
    $scope.prevPage = function () {
        if ($scope.currentPage > 1) {
            $scope.currentPage--;
            window.location.href = localUrl + "-"+$scope.currentPage+".html";
        }
    };
    if($scope.currentPage){
        if ($scope.currentPage > 1 && $scope.currentPage < $scope.totalPage) {
            $scope.pages = [
                    $scope.currentPage - 1,
                $scope.currentPage,
                    $scope.currentPage + 1
            ];
        }
        else if ($scope.currentPage == 1 && $scope.totalPage == 1) {
            $scope.pages = [
                $scope.currentPage
            ];
        }
        else if ($scope.currentPage == 1 && $scope.totalPage > 1) {
            $scope.pages = [
                $scope.currentPage,
                    $scope.currentPage + 1
            ];
        } else if ($scope.currentPage == $scope.totalPage && $scope.totalPage > 1) {
            $scope.pages = [
                    $scope.currentPage - 1,
                $scope.currentPage
            ];
        }
    }else{
        console.log("获取分页信息失败")
    }
}

  不得不承认,angularjs在某个层面的确比jquery要很强好多,在表单实际操作和后台资料显示等层面,特别便捷,为此标注一下。越来越多关于 AngularJs的有关教程看看吧 angularjs 有关文本文档


本文首次发布于开创者素材 ,转载请注明出处,谢谢合作!

相关文章推荐