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.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 += '

'+

'

'+

'

'+

''+

'

'+obj.name+'

'+

'

'+

'

'+

'

#'+i+'

'+

'

---

'+

'

'+

''+obj.content+''+

'

'+

'

'+

'

'+

'

';

});

$("#content").empty();

$("#content").append(html);

$("#page").bootstrapPaginator(options);

},

error:function (error) {

alert("error");

}

});

}

如果是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个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。