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' οnclick='" + 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);
}
2.  页面调用接口,获取数据,渲染分页插件,示例代码如下:

     

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();
     }
  });			
}
其中data是查询条件,pageIndex是当前页数,默认是第1页,返回的结果是分页后的结果,然后再渲染分页插件,pageNum是总页数,form.render()是layui的方法,如果没有使用可以不加。

    

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

优小U

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值