ajax结合接口 分页插件

利用ajax调用接口数据做分页功能

1. 分页方法，写在公共js里面以供调用，代码如下：

因为采用了layui中的样式，所以需要引入layui.css，可以去layui官网下载：http://www.layui.com

如果不想使用layui可以自己定义样式，下面的代码应该都看得懂吧。

//分页   参数列表：当前页数(从1开始)，总页数，方法名，分页容器的ID
function pageGuide(pageIndex,sumPage,fname,data_body ) {
	// 分页的导航数量，只能为奇数
	var pageGuideCount = 5;
	// 显示导航的中间部分
	var index = parseInt(pageGuideCount / 2);
	//开始索引
	var startIndex = 1;
	//结束索引
	var endindex = pageGuideCount;
	if(sumPage <= pageGuideCount){
		startIndex = 1;
		endindex = sumPage;
	}else{
		if(pageIndex > index){
			var a = sumPage - pageGuideCount;
			var b = pageIndex - index;
			startIndex =  a >= b?(startIndex + b):startIndex + a;
			endindex = a >= b?(pageGuideCount + b):pageGuideCount + a;
		}
	}
	var str = "";
	str += '<div class="layui-Box layui-laypage layui-laypage-default" style="display:inline-block;">';
	// 上一页
	if (pageIndex <= 1) {
		str += "<span class='layui-disabled'>上一页</span>";
	} else {
		str += "<a href='javascript:;' class='layui-laypage-prev' onclick='" + fname + "("
        	+ (pageIndex - 1) + ")'>上一页</a>";
	}
	//首页
	str += "<a href='javascript:"+fname+"(1);' class='"+ (pageIndex<=1?"layui-disabled":"") +"' >首页</a>";
	//前面省略显示
	if(startIndex > 1){
		str += '<a href="javascript:;">···</a>';
	}
	//中间可点击 分页
	for ( var i = startIndex; i <= endindex; i++) {
		if (i == pageIndex) {
			str += "<span class='layui-laypage-curr'><em class='layui-laypage-em' style='text-align:center;'>"+i+"</em></span>";
		} else {
			str += "<a href='javascript:"+fname+"("+ i + ");'>"+ i + "</a>";
		}
	}
	//后面省略显示
	if(endindex < sumPage){
		str += '<a href="javascript:;">···</a>';
	}
	//尾页
	str += "<a href='javascript:" + fname + "("+ sumPage + ");' class='"+(pageIndex>=sumPage?"layui-disabled":"")+"'>尾页</a>";
	// 下一页
	if (pageIndex >= sumPage) {
		str += "<span class='layui-disabled'>下一页</span>";
	} else {
		str += "<a href='javascript:"+fname+ "("+ (pageIndex + 1) + ");' class='layui-laypage-next'>下一页</a>";
	}
	str += "</div>";
	$("#"+data_body+"").html(str);
}

var pageSize = 5; //每页记录条数
showList(1);
  		
function showList(pageIndex){
  var roleName = $.trim($("[name=roleName]").val());
  var roleMark = $.trim($("[name=roleMark]").val());
  var status = $("[name=status]").val();
  var data = {
  	roleName:roleName,roleMark:roleMark,status:status,sortName:"id",sortOrder:"desc",pageIndex:pageIndex,pageSize:pageSize
  };
  $.ajax({
  	type: 'post',url: 'roleList',data: data,success: function(res){
  	var html = '';
  	if(res.error_code == 200){
  		$.each(res.result,function(i,item){
  			html += '<tr>'+
				'<td>'+
				'<input type="checkBox" lay-filter="itemChoose" name="role_check" lay-skin="primary">'+
				'</td>'+
				'<td>'+item.id+'</td>'+
				'<td>'+item.roleName+'</td>'+
				'<td>'+item.roleMark+'</td>'+
				'<td>'+item.status+'</td>'+
				'<td>'+
				'<a href="" class="layui-btn layui-btn-small">删除</a>'+
				'<a href="" class="layui-btn layui-btn-small">编辑</a>'+
				'</td>'+
				'</tr>';
  		});
  	    //分页
  	    pageNum = Math.ceil(res.total/pageSize);
  	    pageGuide(pageIndex,pageNum,"showList","pageContent");
        }
        $(".role_list").html(html);
        form.render();
     }
  });			
}