paginatorhelper ajax,Bootstrap Paginator+PageHelper实现分页效果

旧城等待， 2022-09-03 13:23 191阅读 0赞

最近需要做一个分页，找了挺多的前端分页效果，发现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 += '

'![Tseng.png][]'+

'+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;

页面效果展示

![4f4a96d62d6c40a3a65b7ffdd0b154d7.png][]

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

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

[Tseng.png]: 
[4f4a96d62d6c40a3a65b7ffdd0b154d7.png]: /images/20220829/2208618019f24624838fa5ebf5ad9bfd.png

paginatorhelper ajax,Bootstrap Paginator+PageHelper实现分页效果

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关前端实现分页效果

相关 paginatorhelper ajax,Bootstrap Paginator+PageHelper实现分页效果

相关原生js实现分页的效果

相关 PHP实现分页效果1

相关 Ajax实现无刷新分页效果

相关 js实现页面分页效果

相关 vue + element-ui 实现分页效果

相关 PHP+MYSQL实现分页效果

相关 vue+Element-ui实现分页效果

相关 angular+pagination实现分页效果