|
使用pageHelp加pagination加Javascript实现分页功能
1、首先加载pageHelp依赖
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.0.0</version>
</dependency>
2、在mybatis配置文件里配置pageHelp插件
<!-- 配置SqlSessionFactoryBean整合MyBatis -->
<bean id="sqlSessionFactoryBean" class="org.mybatis.spring.SqlSessionFactoryBean">
<!-- 指定MyBatis全局配置文件位置 -->
<property name="configLocation" value="classpath:mybatis-config.xml"/>
<!-- 指定Mapper.xml配置文件位置 -->
<property name="mapperLocations" value="classpath:mybatis/mapper/*Mapper.xml"/>
<!-- 装配数据源 -->
<property name="dataSource" ref="dataSource"/>
<!-- 配置pageHelper插件 -->
<property name="plugins">
<array>
<!-- 配置PageHelper插件 -->
<bean class="com.github.pagehelper.PageHelper">
<property name="properties">
<props>
<!-- 配置数据库方言，告诉PageHelper当前使用的数据库 -->
<prop key="dialect">mysql</prop>
<!-- 配置页码的合理化修正，在1~总页数之间修正页码 -->
<prop key="reasonable">true</prop>
</props>
</property>
</bean>
</array>
</property>
</bean>
3、下载pagination需要的js,css文件，可自行下载或者通过我的网盘下载
链接：https://pan.baidu.com/s/1ZHSwH70paczDLH7raySpXw
提取码：z6s6
4、在jsp页面引入js,css资源
<link rel="stylesheet" href="css/pagination.css"/>
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
5、jsp页面javaScript代码如下
<script type="text/javascript">
$(function(){
// 调用后面声明的函数对页码导航条进行初始化操作
initPagination();
});
// 生成页码导航条的函数
function initPagination() {
// 获取总记录数
var totalRecord = ${requestScope.pageInfo.total};
// 声明一个JSON对象存储Pagination要设置的属性
var properties = {
num_edge_entries: 3, // 边缘页数
num_display_entries: 5, // 主体页数
callback: pageSelectCallback,// 指定用户点击“翻页”的按钮时跳转页面的回调函数
items_per_page: ${requestScope.pageInfo.pageSize}, // 每页要显示的数据的数量
current_page: ${requestScope.pageInfo.pageNum - 1}, // Pagination内部使用pageIndex来管理页码，pageIndex从0开始，pageNum从1开始，所以要减一
prev_text: "上一页", // 上一页按钮上显示的文本
next_text: "下一页" // 下一页按钮上显示的文本
};
// 生成页码导航条
$("#Pagination").pagination(totalRecord, properties);
}
// 回调函数的含义：声明出来以后不是自己调用，而是交给系统或框架调用
// 用户点击“上一页、下一页、1、2、3……”这样的页码时调用这个函数实现页面跳转
// pageIndex是Pagination传给我们的那个“从0开始”的页码
function pageSelectCallback(pageIndex, jQuery) {
// 根据pageIndex计算得到pageNum
var pageNum = pageIndex + 1;
// 跳转页面,**代表请求的路径，自行设置
window.location.href = "admin/getpage?
pageNum="+pageNum;
// 由于每一个页码按钮都是超链接，所以在这个函数最后取消超链接的默认行为
return false;
}
</script>
6、jsp页面中分页pagination代码：
<div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
7、controller代码如下：
@RequestMapping("/admin/getPage")
public String getPageInfo(
// 使用@RequestParam注解的defaultValue属性，指定默认值，在请求中没有携带对应参数时使用默认值
// pageNum默认值使用1
@RequestParam(value="pageNum", defaultValue="1") Integer pageNum,
// pageSize默认值使用5
@RequestParam(value="pageSize", defaultValue="5") Integer pageSize,
ModelMap modelMap
) {
// 调用Service方法获取PageInfo对象
PageInfo<Admin> pageInfo = adminService.getPageInfo(pageNum, pageSize);
// 将PageInfo对象存入模型
modelMap.addAttribute("pageInfo", pageInfo);
return "admin-page";
}
8、service逻辑层代码如下：
public PageInfo<Admin> getPageInfo( Integer pageNum, Integer pageSize) {
PageHelper.startPage(pageNum, pageSize);
List<Admin> list = adminMapper.selectAdmin();
return new PageInfo<>(list);
}
分页到这里基本就实现了，后面就是查询数据库了，相信大家都会，感觉有用的话给作者点个赞吧！！！
|