jquery 分页的两种实现方法
一:下载地址,及方法参数介绍
名 描述 参数值
maxentries 总条目数 必选参数,整数
items_per_page 每页显示的条目数 可选参数,默认是10
num_display_entries 连续分页主体部分显示的分页条目数 可选参数,默认是10
current_page 当前选中的页面 可选参数,默认是0,表示第1页
num_edge_entries 两侧显示的首尾分页的条目数 可选参数,默认是0
link_to 分页的链接 字符串,可选参数,默认是"#"
prev_text “前一页”分页按钮上显示的文字 字符串参数,可选,默认是"Prev"
next_text “下一页”分页按钮上显示的文字 字符串参数,可选,默认是"Next"
ellipse_text 省略的页数用什么文字表示 可选字符串参数,默认是"…"
prev_show_always 是否显示“前一页”分页按钮 布尔型,可选参数,默认为true,即显示“前一页”按钮
next_show_always 是否显示“下一页”分页按钮 布尔型,可选参数,默认为true,即显示“下一页”按钮
callback 回调函数 默认无执行效果
二:引入jquery.js、jquery.pagination.js和pagination.css
<script src="js/jquery.min.js"></script> <script src="js/jquery.pagination.js"></script> <link href="js/pagination.css" rel="stylesheet" type="text/css" />
三:准备jsp页面元素
<!-- 显示分页数据 --> <p class="list"></p> <!-- 显示页码 --> <p class="Pagination" id="pagination"></p>
四:实现异步加载
js代码:
$(function() { var pageSize = 5; // 每页显示多少条记录 var total; // 总共多少记录 Init(0); // 注意参数,初始页面默认传到后台的参数,第一页是0; $(".Pagination").pagination(total, { callback : PageCallback, prev_text : '上一页', next_text : '下一页', items_per_page : pageSize, num_display_entries : 4, // 连续分页主体部分显示的分页条目数 num_edge_entries : 1, // 两侧显示的首尾分页的条目数 }); //点击上一页、下一页、页码的时候触发的事件 function PageCallback(index, jq) { // 前一个参数表示当前点击的那个分页的页数索引值,后一个参数表示装载容器。 Init(index); } function Init(pageIndex) { // 参数就是点击的那个分页的页数索引值 $.ajax({ type : "get", url : ROOT + "/map/getPeopleList?rows=" + pageSize + "&page=" + pageIndex, async : false, dataType : "json", success : function(data) { // 赋值total,用于计算 total = data.total; //拼接html(这个部分根据自己的需求去实现) var list = data.pList; var html = '<p>' for (var i = 0; i < list.length; i++) { html += "<p>" + list[i].name + "</p>" } html += '</p>'; $('.list').html(html) }, error : function() { alert("请求超时,请重试!"); } }); }; });
后台代码:
pojo对象
package com.debo.map.pojo; public class People { private String name; private int limit;//用于分页 private int Offset;//用于分页 public String getName() { return name; } public void setName(String name) { this.name = name; } public int getLimit() { return limit; } public void setLimit(int limit) { this.limit = limit; } public int getOffset() { return Offset; } public void setOffset(int offset) { Offset = offset; } }
controller代码
@RequestMapping(value="/getPeopleList",method = RequestMethod.GET) @ResponseBody public Map<String,Object> getPeopleList(HttpServletRequest request){ //创建对象,封装查询条件 People people = new People(); //获取每页记录数 int limit = Integer.parseInt(request.getParameter("rows")); people.setLimit(limit); //获取当前页数 int page = Integer.parseInt(request.getParameter("page")); people.setOffset(page*limit); Map<String, Object> map = new HashMap<String,Object>(); //查询总记录数 int total = mapService.countNumb(); map.put("total", total); //查询当前页面需要的数据 List<People> pList = mapService.getPeopleList(people); map.put("pList", pList); return map; }
mapper配置sql语句
<select id="countNumb" resultType="int"> SELECT count(1) FROM people </select> <select id="getPeopleList" resultType="com.debo.map.pojo.People"> SELECT * FROM people LIMIT #{offset},#{limit} </select>
五:实现一次性加载
js代码:
$(function() { //默认每一页显示5条数据 getMsg(5) //分页实现函数 function getMsg(num) { $.ajax({ url : ROOT+'/map/getPeopleList', type : 'GET', dataType : 'json', success : function(data) { // 1.计算分页数量 var showNum = num; var dataL = data.length; var pageNum = Math.ceil(dataL / showNum); $('.Pagination').pagination(pageNum,{ num_edge_entries : 1, num_display_entries : 4, prev_text : "<<", next_text : ">>", callback : function(index) { var html = '<p>' for (var i = showNum * index; i < showNum * index + showNum; i++) { if (i < dataL) { html += "<p>" + data[i].name + "</p>" } } html += '</p>'; $('.list').html(html) }) } }) } } })
后台代码:
pojo对象
package com.debo.map.pojo; public class People { private String name; public String getName() { return name; } public void setName(String name) { this.name = name; } }
controller层代码
@RequestMapping(value="/getPeopleList",method = RequestMethod.GET) @ResponseBody public List<People> getPeopleList(HttpServletRequest request){ List<People> pList = mapService.getPeopleList(); return pList; }
mapper配置sql语句
<select id="getPeopleList" resultType="com.debo.map.pojo.People"> SELECT * from people </select>
相关推荐:
以上就是jquery 分页的两种实现方法的详细内容,更多请关注其它相关文章!
上一篇: IMG2TXT
下一篇: php计算两个经纬度地点之间的距离