paginatorhelper ajax,Bootstrap Paginator+PageHelper实现分页效果_蓝瞳_前端开发者
最近需要做一个分页,找了挺多的前端分页效果,发现Bootstrap Paginator分页插件效果不错,而我页面也是用BootStrap做的响应式页面,就做了实现一个简单的分页效果。
PageHelper地址
Bootstrap Paginator地址
在SpringBoot+Mybatis做分页
1.首先添加maven依赖
com.github.pagehelper
pagehelper
4.1.6
2.添加一个PageHelperConfig配置类
@Configuration
public class PageHelperConfig {
@Bean
public PageHelper pageHelper(){
PageHelper pageHelper = new PageHelper();
Properties properties = new Properties();
properties.setProperty("offsetAsPageNum", "true");
properties.setProperty("rowBoundsWithCount", "true");
properties.setProperty("reasonable", "true");
properties.setProperty("reasonable","true");
properties.setProperty("pageSizeZero", "true");
pageHelper.setProperties(properties);
return pageHelper;
}
}
3.写一个用来存储分页信息的对象
public class PageBean implements Serializable {
private static final long serialVersionUID = 1L;
private long total; //总记录数
private List list; //结果集
private int pageNum; //第几页
private int pageSize; //每页记录数
private int pages; // 总页数
private int size; //当前页的数量<=pageSize
public PageBean(List list){
if (list instanceof Page){
Page page = (Page) list;
this.pageNum = page.getPageNum();
this.pageSize = page.getPageSize();
this.total = page.getTotal();
this.pages = page.getPages();
this.list = page;
this.size = page.size();
}
}
public long getTotal() {
return total;
}
public void setTotal(long total) {
this.total = total;
}
public List getList() {
return list;
}
public void setList(List list) {
this.list = list;
}
public int getSize() {
return size;
}
public void setSize(int size) {
this.size = size;
}
public int getPageNum() {
return pageNum;
}
public void setPageNum(int pageNum) {
this.pageNum = pageNum;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getPages() {
return pages;
}
public void setPages(int pages) {
this.pages = pages;
}
}
4.在Service接口和实现上,我们可以查询到的把数据传到PageBean
public interface ArticleService {
PageBean selectArticleList(int pageNum, int pageSize);
}
@Service
public class ArticleServiceImpl implements ArticleService {
@Autowired
private ArticleMapper articleMapper;
public PageBean selectArticleList(int pageNum, int pageSize) {
PageHelper.startPage(pageNum, pageSize);
List list = this.articleMapper.selectArticleList();
return new PageBean<>(list);
}
}
5.Controller
@RestController
public class ArticleJsonController {
@Autowired
private ArticleService articleService;
@GetMapping("/articleManage/articlePageBean")
public PageBean articlePageBean(int pageNum, int pageSize) {
PageBean pageBean = this.articleService.selectArticleList(pageNum, pageSize);
return pageBean;
}
}
6.页面用Ajax无刷新分页,添加Bootstrap Paginator插件,bootstrap-paginator.
function pagehtml(pageNum) {
var articleid = $("#articleNum").val();
if (pageNum == 0){
pageNum=1;
} else {
pageNum=pageNum;
}
$.ajax({
url:"/TsengBlog/article/replyPage",
type:"get",
dataType:"json",
data: {pageNum : pageNum, pageSize : 5, articleid : articleid },
success:function (data) {
var options = {
alignment:"center",//居中显示
currentPage: data.pageNum,//当前页数
totalPages: data.pages,//总页数 注意不是总条数
pageUrl: function(type, page, current){
if (page==current) {
return "javascript:void(0)";
} else {
return "javascript:pagehtml("+page+")";
}
}
};
var
如果是Maven+SSM的,SSM整合就不多说了,网上有很多博客和例子整合。
1.mybatis.xml配置
2.service
public PageInfo page(pageNum, pageSize){
PageHelper.startPage(pageNum, pageSize);
List lists = navService.getAllNav();
PageInfo pageInfo = new PageInfo(lists);
return PageInfo;
}
页面效果展示
如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持前端开发者。
paginatorhelper ajax,Bootstrap Paginator+PageHelper实现分页效果_蓝瞳_前端开发者相关推荐
- Bootstrap Paginator分页插件+ajax
Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub Bootstrap分页插件属性介绍: http://www.cnblogs. ...
- Bootstrap Paginator 分页插件参数介绍及使用
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...
- .net Bootstrap实现服务器分页效果
今天分享一下.NET 基于Bootstrap框架实现服务器分页实现效果 个人使用过基于Bootstrap的两种分页,可能还有其他方法 基于Bootstrap-table插件实现表格分页–下次分享 基于 ...
- bootstrap分页插件php,bootstrap paginator分页插件使用方法
Bootstrap Paginator是一款基于Bootstrap的js分页插件,本文主要给大家介绍bootstrap paginator分页插件的两种使用方式,一起看看吧,希望能帮助到大家. 分页有 ...
- php ajax实现分页效果
ajaxpage.php[这里是数据展示页面的代码]: <meta charset='utf-8′> <script src=" http://ajax.googleapi ...
- java 分页_Spring Boot + MyBatis 如何借助PageHelper插件实现分页效果
概述 上文中已经介绍了Spring和MyBatis的整合,在上文的基础上我们加入了PageHelper这个插件,来实现MyBatis列表查询的分页效果 PageHelper是啥 PageHelper是 ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
- ASP+AJAX实现分页效果[Z]
原文地址:http://blog.xswg.com/memeber/liaoguihui/archives/2006/4544.html 在WIN200+ACCESS可以正常运行 最近在网站看到AJA ...
- ajax分页功能实现php,详解AJAX分页效果的简单实现
最近写一个给用户组添加角色的功能,要求一边是未添加的角色,一边是已添加的角色,还有搜索功能, 点击添加后,ajax保存操作. 本文主要为大家详细介绍了AJAX分页效果的简单实现代码,具有一定的参考价值 ...
最新文章
- mongodb distinct too large用 group
- php 图片不让下载,php简单实现文件或图片强制下载的方法
- ZED ROS包发布topic介绍
- scipy.ndimage.filters.gaussian_filter()
- HTML中body内常用标签
- ASP.NET加密解密
- webpack入坑之旅(一)不是开始的开始
- [En]Web Forms Syntax Reference
- Java随机数的使用
- 转载:LTE中的各种ID含义
- 百度地图API去掉百度logo信息等
- 符号Symbol介绍及应用
- 洛谷 P2962 [USACO09NOV]灯Lights
- 【网络通信】学生成绩管理系统(基于JSP/MySQL环境搭建)
- Java八大基本数据类型-详解
- html下拉菜单换背景颜色,如何在select框下拉菜单中更改蓝色突出显示的颜色
- 九龙证券|磷酸铁锂电池包和铅酸电池有哪些区别?
- RK3568平台开发系列讲解(时间篇)蓝牙系统结构时间同步机制
- Unity学习笔记--Extension Method 扩展方法
- 百度网盘批量重命名工具怎么用,百度网盘怎么批量修改文件名