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的方法，如果没有使用可以不加。
ajax结合接口 分页插件相关推荐
- 浅谈AJAX并实现使用pagehelper-5.1.10.jar分页插件实现异步从数据库中获取数据分页显示
AJAX异步请求 什么是ajax 异步 JavaScript 同步和异步的区别 同步方式:正常情况下,浏览器与服务器之间是串行操作,类似于一个Java线程的操作. 异步方式:浏览器与服务器是并行操作, ...
- 使用pagination分页插件实现Ajax动态分页
pagination插件下载地址:https://pan.baidu.com/s/1c3QQ7XQ 一.前言 做的一个列表页要将所有结果显示出来,太多记录不能一次性显示,所以要进行分页.一开始尝试自己 ...
- java ajax jquery分页插件_JQueryPagination分页插件,ajax从struts请求数据
2017-07-16 学完了struts2,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址 插件作者对于参数讲解的不够详细,琢磨了半天才明白怎么用,不多说, ...
- java ajax jquery分页插件_分享精心挑选的12款优秀jQuery Ajax分页插件和教程
摘要:这篇jQuery栏目下的"分享精心挑选的12款优秀jQuery Ajax分页插件和教程",介绍的技术点是"jquery_ajax分页插件.jquery_ajax.a ...
- Bootstrap Paginator分页插件+ajax
Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub Bootstrap分页插件属性介绍: http://www.cnblogs. ...
- 开启mapper接口扫描，添加分页插件
新建一个包:通过@mapperScan注解指定要变成实现类的接口所在的包,然后包下面的所有接口在编译之后都会生成相应的实现类.PaginationInterceptor是一个分页插件. com.leo ...
- java ajax jquery分页插件_jquery ajax分页插件的简单实现
说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构: 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 ...
- 12款优秀jQuery Ajax分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- jQueryPager(JQuery分页插件pagination实现Ajax分页)
jQueryPager(JQuery分页插件pagination实现Ajax分页) 下载地址 jQueryPager(JQuery分页插件pagination实现Ajax分页).rar 转载于:htt ...
最新文章
- centos cp 详解
- java完整程序_求一个完整的java程序
- iOS培训教程——创建第一级控制器
- UC Berkeley提出变分判别器瓶颈，有效提高对抗学习平衡性
- 启动欢迎页面时，Android Studio设置全屏Activity
- Django：模板与视图
- 安装php扩展phpredis,安装php扩展phpredis
- go interface 转 string_跟我一起学习go语言，map「string」interface「」代码示例
- 【机房重构】组合查询--存储过程
- 自动驾驶软件开发人才现状_浅析自动驾驶的重要一环：感知系统发展现状与方向...
- python课程的中期报告_寒假中期学习报告
- [Linux]Red Hat Linux 9.0环境下架设Web服务器[2]
- 特大喜讯！鸿蒙项目来了：在线电子词典
- 【分立元件】电感器（inductor）——简介
- pwnable.kr第二遍---mistake
- 5个步骤，打造你的业务中台
- 资源网址合集的合集，上千个链接！
- React.createRef()的使用
- 什么是双亲委派机制？
- git之合并分支|git如何合并分支