jquery pagination分页

转载：https://blog.csdn.net/qq_37936542/article/details/79457012

效果图展示，因为只是一个简单的demo，所以代码和样式看起来比较简单

一：pagination插件相关文件的下载地址，以及方法参数介绍

下载地址：http://www.jq22.com/jquery-info19062

名 描述 参数值
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页面元素容器

<!-- 这里显示数据 -->
<div id="htmlDiv"> </div>

<!-- 这里显示分页,注意class属性必须是 class="pagination",否则会影响样式-->
<center> <div id="Pagination" class="pagination"> </div> </center>

四：js相关代码

$(function() {

var pageSize = 3;//定义每页显示记录条数

init();//初始化函数

/**
因为pagination插件初始化需要数据的总条目数作为参数
所以init函数作用就是查询总条目数
*/
function init() {
$.ajax({
type : "GET",
url : "/webDemo/page/getTotal.do",
async : false, //因为需要赋值,不可以异步
success : function(total) {
//分页按钮属性定义
$("#Pagination").pagination(total, {
callback : PageCallback, //点击分页按钮的回调函数
items_per_page : pageSize, //每页显示的条目数
prev_text : '上一页', //"前一页"分页按钮上显示的文字
next_text : '下一页', //"后一页"分页按钮上显示的文字
num_display_entries : 4, // 连续分页主体部分显示的分页条目数
num_edge_entries : 1, // 两侧显示的首尾分页的条目数
});
}
});
}

//分页按钮点击事件
function PageCallback(page, jq) { // page表示当前页索引值，jq表示装载容器。
getPage(page);
}

//去后台加载数据，并拼接显示出来
function getPage(page) { // 参数就是点击的那个分页的页数索引值
$.ajax({
type : "GET",
url : "/webDemo/page/getPage.do?page="+page+"&pageSize="+pageSize,
dataType : "json",
success : function(data) {
//拼接html(这个部分根据自己的需求去实现)
var list = data.users;
var htm = '';

for (var i = 0; i  < list.length; i++) {
htm +=  "<center><div><p>"
htm +=  "<span>ID:" +  list[ i] .id + "</ span>" ;
htm += " <span>姓名:" + list[i].name + " </span>";
htm += " <span>性别:" + list[i].sex + " </span>";
htm += " </p> </div> </center>"
}

$('#htmlDiv').html(htm)
}
});
};

});

五：PageController代码

package com.mote.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping(value = "/page")
public class PageController {

@Autowired
private PageService pageService;


@RequestMapping(value="/getTotal",method = RequestMethod.GET)
@ResponseBody
public int getTotal() {
//查询总记录数
int count = pageService.count();
return count;
}

@RequestMapping(value="/getPage",method = RequestMethod.GET)
@ResponseBody
public Map <String, Object> getPage(@RequestParam("page")int page,
@RequestParam("pageSize")int pageSize) {

Map <String, Object> map = new HashMap <String,Object>();

//计算sql语句limit的起始索引值
int offset = pageSize * page;

//查询当前页数据
List <User> users = pageService.getUsers(offset,pageSize);
map.put("users", users);

return map;
}

}

六：相关的pojo和sql语句

pojo:

package com.mote.pojo;

public class User {

private Integer id;
private String name;
private String sex;

public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
}

sql:

<select id="count" resultType="int">
SELECT count(1)
FROM user
</select>
<select id="getUsers" resultType="com.mote.pojo.User">
SELECT * FROM user
LIMIT #{offset},#{pageSize}
</select>