jquery+ajax分页函数封装（后端分页）

看了很多网上的各种分页插件，代码来量多不说，而且还要配置各种参数，相信很多小伙伴都被搞晕了吧！其实后端分页就是给后端传两个参数：pageNo第几页，pageSize每页显示多少条，一般情况下pageSize是固定的每页显示10条，20条，50条等，这个和后端小哥哥定好就可以了，话不多说我直接上代码

<div class="container" style="">
	<div class="page-header" style="margin-top:0px;">
		<h3>日志管理</h3>
	</div>
	<table class="table table-bordered table-striped">
		<thead>
			<tr>
				<th width="100">用户编号</th>
				<th>用户英文名</th>
				<th>用户请求URL</th>
				<th>用户请求时间</th>
				<th width="200">操作</th>
			</tr>
		</thead>
		<tbody id="logList"></tbody>
		<tfoot>
			<tr>
				<td colspan="5">
					<div class="pull-left" style="margin-top: 8px;">
						<span id="summary"></span>
					</div>
					<div class="pull-right">
						<form class="form-inline">
							<button id="firstPage" type="button" class="btn btn-default btn-sm">首页</button>
							<button id="previousPage" type="button" class="btn btn-default btn-sm">上一页</button>
							<button id="nextPage" type="button" class="btn btn-default btn-sm">下一页</button>
							<button id="lastPage" type="button" class="btn btn-default btn-sm">尾页</button>
							<span>跳转到</span>
							<input type="text" class="form-control" name="page_num" style="width:60px;"/>
							<span>页</span>
							<button id="jump" type="button" class="btn btn-default btn-sm">跳转</button>
						</form>
					</div>
				</td>
			</tr>
		</tfoot>
	</table>

</div>



上面是html主代码

<script type="text/javascript">
	$(document).ready(function(){
		var pageNo = 1;
		var pageSize = 50;
		var pages = 0;
		//获取日志信息
		function loadData(pageNo,pageSize){
			//每次重新从API数据接口获取数据都要先清除原先表格 <tr>的内容
			$(".detail").remove();
			$.ajax({
				type:"post",
				url:config.url+"/system/pageSystemOperateLog",
				async:true,
				dataType:"json",
				data:{
					"token":window.sessionStorage.tokenbody,
					"pageNo":pageNo,
					"pageSize":pageSize
				},
				success:function(data){
					if(data.errcode == 0){
						var getlogList = data.body.rows;
						//共多少条
						var totalCount = data.body.total;
						//共多少页
						pages = data.body.pageCount;
						
						for(var i=0;i<getlogList.length;i++){
							$("#logList").append('<tr class="detail"><td>'+getlogList[i].id+'</td><td>'+getlogList[i].userName+'</td><td>'+getlogList[i].requestUrl+'</td><td>'+getlogList[i].createTime+'</td><td><button type="button" οnclick="seedetial('+getlogList[i].id+')" class="btn btn-info btn-sm">查看详情</button></td></tr>');
						}
						
						displayFooter(totalCount, pageNo, pages);
					}
					if(data.errcode != 0){
						layer.msg(data.errmsg);
					}
				},
				error:function(){
					layer.msg("系统繁忙，请联系管理员");
				}
			});
		}
		loadData(pageNo,pageSize);
		
		//展示foot左面信息
		function displayFooter(totalCount, pageNo, pages){
			var newText = '共'+totalCount+'条，'+'第'+pageNo+'页，'+'共'+pages+'页';
			$("#summary").text(newText);
		}
		
		//跳转页码
		$("input[name='page_num']").keydown(function(e){
			if(e.keyCode == 13){
				$("#jump").click();
			}
		});
		$("#jump").click(function(){
			var goPage = $("input[name='page_num']").val();
			if(goPage >= 1 && goPage <= pages && goPage != pageNo){
				pageNo = goPage;
				loadData(pageNo,pageSize);
			}else{
				return false;
			}
		});
		//首页
		$("#firstPage").click(function(){
			pageNo = 1;
			loadData(pageNo, pageSize);
		});
		//最后一页
		$("#lastPage").click(function(){
			pageNo = pages;
    		loadData(pageNo, pageSize);
		});
		//上一页
		$("#previousPage").click(function(){
			if(pageNo == 1){
        		return false;
    		}else{
        		pageNo--;
        		loadData(pageNo, pageSize);
    		}
		});
		//下一页
		$("#nextPage").click(function(){
			if(pageNo == pages){
        		return false;
    		}else{
        		pageNo++;
        		loadData(pageNo, pageSize);
    		}
		});
	});

</script>

好了 搞定，就这么简单