<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		{{pageNum}} {{totalRs}}
		<button class="prev"  ng-if="pageGroup>0">上一页{{prev}}</button>
		<ul class="page">
			<li ng-repeat="v in pages" data-page='{{v}}'>{{v}}</li>
		</ul>
		<button class="next" ng-if="npks">下一页{{pageGroup}}</button>
		<ul>
			<li ng-repeat="v in list">{{v.pk4}} - {{v.card}}</li>
		</ul>
		<script type="text/javascript" src="http://static.523w.cn/js/jquery/1.11.1/jquery.min.js"></script>
		<script  src="http://static.523w.cn/js/angular/1.4.6/angular.min.js" type="text/javascript"></script>
		<script src="http://static.523w.cn/js/angular/angular.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		function ots_page(){
			var obj=new Object();
			obj.npks=[];
		    obj.spks=[];
		    obj.pageGroup=0;
		    obj.prev='';
		    obj.url='';
		    obj.post={};
		    obj.first=function () {
		    	jQuery.ajax({
		    		url:obj.url,
		    	    data:obj.post,
		    	    dataType: "json",
		    	    type: "post",
		    	    timeout: 10000,
		    	    success: function(data) {
		    	    	obj.npks.push(data.npk);
	    	    		obj.spks.push(data.spk);
		    	    	obj.pageshow({data:data.data});
		    	    },
		    	    error: function(e) {
		    	        console.log(JSON.stringify(e));
		    	    }
		    	});
		    };
		    obj.next=function () {
		    	obj.post.npk=obj.npks[obj.pageGroup];
		    	jQuery.ajax({
		    		url:obj.url,
		    	    data:obj.post,
		    	    dataType: "json",
		    	    type: "post",
		    	    timeout: 10000,
		    	    success: function(data) {
		    	    	if (data.npk!='') {
		    	    		obj.pageGroup++;
		    	    		obj.npks.push(data.npk);
		    	    	}
		    	    	obj.spks.push(data.spk);
		    	    	obj.pageshow({data:data.data});
		    	    	
		    	    },
		    	    error: function(e) {
		    	        console.log(JSON.stringify(e));
		    	    }
		    	});
		    };
		    obj.prev=function () {
		    	obj.post.npk=obj.spks[obj.pageGroup-1];
		    	jQuery.ajax({
		    		url:obj.url,
		    	    data:obj.post,
		    	    dataType: "json",
		    	    type: "post",
		    	    timeout: 10000,
		    	    success: function(data) {
		    	    	if (obj.pageGroup>0) {
		    	    		obj.pageGroup--;
		    	    	}
		    	    	obj.pageshow({data:data.data});
		    	    },
		    	    error: function(e) {
		    	        console.log(JSON.stringify(e));
		    	    }
		    	});
		    };
		    obj.pageshow=function () {
				var opts=typeof(arguments[0])!="undefined"?arguments[0]:{};
				obj.pageSize=typeof(obj.pageSize)!="undefined"?obj.pageSize:50;
				obj.pageNow=typeof(obj.pageNow)!="undefined"?obj.pageNow:1;
				obj.totalRs=opts.data.length;
				obj.pageNum=Math.ceil(obj.totalRs/obj.pageSize);
				obj.pages=[];
		    	for (var i = 1; i <=obj.pageNum; i++) {
	                obj.pages.push(i+obj.pageGroup*obj.pageNum);
	            }
	            obj.callback_pageshow({
	            	data:opts.data.slice((obj.pageNow-1)*obj.pageSize,obj.pageNow*obj.pageSize),
	            	pages:obj.pages,
	            	pageGroup:obj.pageGroup,
	            	npks:obj.npks
	            });
		    	
		    	jQuery(document).on('click',obj.pagesBtn,function () {
		    	    var the=jQuery(this);
		    	    obj.pageNow=the.attr('data-page')-obj.pageGroup*obj.pageNum;
		    	    obj.callback_pageshow({
		    	    	data:opts.data.slice((obj.pageNow-1)*obj.pageSize,obj.pageNow*obj.pageSize),
		    	    	pages:obj.pages,
		            	pageGroup:obj.pageGroup,
		            	npks:obj.npks
		    	    });
		    	});
		    };
			return obj;
		}
		var page=new ots_page();
		page.url='/api/cs';
		page.first();
		page.pagesBtn='[data-page]';
		page.callback_pageshow=function (data) {
			scope.list=data.data;
			scope.pages=data.pages;
			scope.pageGroup=data.pageGroup;
			scope.npks=data.npks;
			scope.$apply();
		};
		jQuery(document).on('click','.next',function () {
		    page.next();          
		})
		jQuery(document).on('click','.prev',function () {
		    page.prev();          
		})
		</script>
	</body>

</html>