引导分页器页面帮助器实现分页效果

最近需要做一个分页，找了挺多的前端分页效果，发现引导分页器分页插件效果不错，而我页面也是用引导程序做的响应式页面，就做了实现一个简单的分页效果。

分页地址

引导分页器地址

在跳羚做分页

1.首先添加专家依赖

依赖性groupIdcom.github.pagehelper/groupId人工智能页面助手/人工智能版本4 .1 .6/版本/依赖性2。添加一个页面帮助配置配置类

@配置公共类page helper config { @ Bean public page helper page helper(){ page helper page helper=new page helper()；属性属性=新属性();属性。设置属性(' offsetapagenum '，' true ')；属性。设置属性(' rowbondswitcount '，' true ')；properties.setProperty('合理，' true ')；properties.setProperty('合理，' true ')；属性。设置属性(' pageSizeZero '，' true ')；pageHelper.setProperties(属性);返回pageHelper}}3。写一个用来存储分页信息的对象

公共类PageBeanT实现可序列化{私有静态最终长系列版本id=1L；私长合计；//总记录数私人列表；//结果集private int pageNum//第几页私有int pageSize//每页记录数私有（同Internationalorganizations）国际组织页面；//总页数私有（同Internationalorganizations）国际组织大小；//当前页的数量=PageSize public PageBean(LiST LiST){ if(Page的LiST实例){ PageT Page=(PageT)LiST；这个。页码=页码。getpage num()；这个。PageSize=page。getpage size()；这个。总计=页数。gettotal()；这个。page=page。GetPages()；this.list=pagethis。大小=页面。size()；} } public long getTotal(){ return total；} public void setTotal(long total){ this。总计=总计；} 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 get page num(){ return page num；} public void setagenum(int page num){ this。页码=页码；} public int get page size(){ return page size；} public void SetPageSize(int PageSize){ this。页面大小=页面大小；} public int GetPages(){ return pages；} public void SetPages(int page){ this。页数=页数；}}4.在服务接口和实现上，我们可以查询到的把数据传到PageBean

公共接口文章服务{ page bean文章selectarticle list(int page num，int page size)；}@Servicepublic类ArticleServiceImpl实现ArticleService { @ Autowired私有项目映射器项目映射器；公共页面bean文章selectArticleList(int page num，int page size){ page helper。起始页(页码、页面大小)；列表文章列表=这个。文章映射器。selectarticle list()；返回新的PageBean(列表);}}5.控制器

@RestControllerpublic类article JSON controller { @ Autowired私有文章服务文章服务；@ GetMapping('/article manage/article page bean ')公共页面Bean articlePageBean(int pageNum，int page size){ page bean article page bean=this。文章服务。选择文章列表(页码、页面大小)；返回pageBean}}6。页面用埃阿斯无刷新分页，添加引导分页器插件，bootstrap-paginator.js和bootstrap-responsive.min.css样式

div id=' content ' class=' container '/div class=' container ' div class=' panel col-sm-10 panel-default ' div class=' panel-body reply-top media ' div id=' page '/div/div/div/div函数page html(page num){ var article id=$(' # article num ').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 3360函数(数据){ var options={ alignment : ' center '，//居中显示currentPage: data.pageNum，//当前页数共3360页数据。第页，//总页数注意不是总条数pageUrl:函数（类型，页面，当前){ if(page==当前){ return ' JavaScript : void(0)'；} else { return ' JavaScript : page html(' page ')'；} } };var html=$。每个(data.list，function (i，obj){ html=' div class=' panel col-sm-10 panel-default ' ' ' div class=' panel-body reply-top media ' ' ' div class=' col-sm-3 col-MD-2 media-left ' ' ' img src=' http : image/Tseng。png ' class=' img-circle img-缩略图'/p ' class=' p-CSS ' obj。name '/p ' '/div ' ' div class=' col-sm-10 })；$('#content ').empty()；$('#content ').追加(html)；$('#page ').自举者(选项);}，错误：函数(错误){ alert(' error ')；} });}如果是马文地对地导弹(Surface-to-Surface Missile)的，SSM整合就不多说了，网上有很多博客和例子整合。

1.mybatis.xml配置

配置插件插件拦截器=' com。github。pagehelper。“页面助手”属性名称='方言'值='mysql' /属性名称='页面大小零'值='true' /属性名称=' offsetAsPageNum '值=' true '/属性名称='合理'值=' true '/属性名称=' rowBoundsWithCount '值=' true '/plugin/plugins/configuration 2服务.

公共页面信息页面(pageNum，页面大小){ page helper。起始页(页码、页面大小)；ListShopNav list=NavServiCe。GetAlnav()；页面信息商店导航页面信息=新页面信息商店导航（列表);返回页面信息；}页面效果展示

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