最近需要做一个分页，找了挺多的前端分页效果，发现Bootstrap Paginator分页插件效果不错，而我页面也是用BootStrap做的响应式页面，就做了实现一个简单的分页效果。
成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、成都网站建设、镇坪网络推广、小程序开发、镇坪网络营销、镇坪企业策划、镇坪品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供镇坪建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com
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.js和bootstrap-responsive.min.css样式
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 html="";
$.each(data.list, function (i, obj) {
html += ''+
'
'+
'
'+
'
'+
'
#'+i+'
'+
'
'+
'
'+
''+obj.content+''+
'
'+
'
'+
'
'+
'
如果是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插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
当前标题：BootstrapPaginator+PageHelper实现分页效果
浏览地址：
http://cdkjz.cn/article/pcgjic.html
'+
'