jquery 分页实现

jquery 分页实现

HTML

<script id = "page-wrap-template" type="text/html">
	<div class="page-wrap-left float-left">
		总共{{tableData.total}}条
	</div>
	<div class="page-wrap-right float-right">
		显示行数
		<div class="page-select-wrap select-wrap">
			<span class="page-select select-btn public-select-btn">{{askData.pageSize}}</span>
			<ul class="select-list" id = "select-list-pageNum">
				<li>10</li>
				<li>30</li>
				<li>100</li>
			</ul>
		</div>
		<span class="page-btn first-page {{tableData.isFirstPage?'disabled':''}}">首页</span>
		<span class="page-btn prev {{tableData.hasPreviousPage?'':'disabled'}}"></span>
		{{each tableData.navigatepageNums}}
			<span class="page-btn {{$value == askData.pageNum?'active':''}}">{{$value}}</span>
		{{/each}}
		<span class="page-btn next {{tableData.hasNextPage?'':'disabled'}}"></span>
		<span class="page-btn last-page {{tableData.isLastPage?'disabled':''}}">尾页</span>
	</div>
</script>

JS

	$(document).on("click",".page-btn",function(){
		var $this = $(this);
		if($this.hasClass("disabled") || $this.hasClass("active")){
			return false;
		};
		if($this.hasClass("prev")){
			data.askData.pageNum = data.tableData.prePage;
		}else if($this.hasClass("next")){
			data.askData.pageNum = data.tableData.nextPage;
		}else if($this.hasClass("first-page")){
			data.askData.pageNum = 1;
		}else if($this.hasClass("last-page")){
			data.askData.pageNum = data.tableData.pages;
		}else{
			data.askData.pageNum = $this.text();
		};
		initData();
	});
	function initData(){
		var loading = layer.load();
		getRequest(CONFIG.operationThemes,data.askData,function(res){
			if(res.head.code == 0){
				var tableData = res;
				tableData.hasNextPage = tableData.pageNum < tableData.pages;
				tableData.hasPreviousPage = tableData.pageNum > 1;
				tableData.isFirstPage = tableData.pageNum == 1;
				tableData.isLastPage = tableData.pageNum == tableData.pages;
				tableData.prePage = tableData.pageNum - 1;
				tableData.nextPage = tableData.pageNum + 1;
				var arr = [];
				if(tableData.pages<6){
					for(var i = 0;i < tableData.pages;i++){
						arr.push(i+1)
					}
				}else{
					var first = tableData.pageNum - 2;
					console.log(first)
					if(first < 1){
						first = 1;
					}else if(first+5 > tableData.pages){
						first = tableData.pages - 4;
					}
					for(var i = 0;i < 5;i++){
						arr.push(first+i)
					}
				}
				tableData.navigatepageNums = arr;
				data.tableData = tableData;
				$('#table').html(template('table-template', data));
				$('#page-wrap').html(template('page-wrap-template', data));;
				console.log('data', data)
			};
			layer.close(loading);
		});
	};