溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近需要做一個分頁，找了挺多的前端分頁效果，發現Bootstrap Paginator分頁插件效果不錯，而我頁面也是用BootStrap做的響應式頁面，就做了實現一個簡單的分頁效果。
PageHelper地址
Bootstrap Paginator地址
在SpringBoot+Mybatis做分頁
1.首先添加maven依賴
<dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>4.1.6</version> </dependency>
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<T> implements Serializable {
private static final long serialVersionUID = 1L;
private long total; //總記錄數
private List<T> list; //結果集
private int pageNum; //第幾頁
private int pageSize; //每頁記錄數
private int pages; // 總頁數
private int size; //當前頁的數量<=pageSize
public PageBean(List<T> list){
if (list instanceof Page){
Page<T> page = (Page<T>) 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<T> getList() {
return list;
}
public void setList(List<T> 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<Article> selectArticleList(int pageNum, int pageSize);
}
@Service
public class ArticleServiceImpl implements ArticleService {
@Autowired
private ArticleMapper articleMapper;
public PageBean<Article> selectArticleList(int pageNum, int pageSize) {
PageHelper.startPage(pageNum, pageSize);
List<Article> 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<Article> pageBean = this.articleService.selectArticleList(pageNum, pageSize);
return pageBean;
}
}
6.頁面用Ajax無刷新分頁，添加Bootstrap Paginator插件，bootstrap-paginator.js和bootstrap-responsive.min.css樣式
<div id="content" class="container"></div>
<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>
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 += '<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="image/Tseng.png" class="img-circle img-thumbnail" />'+
'<p class="p-css">'+obj.name+'</p>'+
'</div>'+
'<div class="col-sm-10">'+
'<div class="text-right">#'+i+'</div>'+
'<hr/>'+
'<div class="reply-content">'+
'<span>'+obj.content+'</span>'+
'</div>'+
'</div>'+
'</div>'+
'</div>';
});
$("#content").empty();
$("#content").append(html);
$("#page").bootstrapPaginator(options);
},
error:function (error) {
alert("error");
}
});
}
如果是Maven+SSM的，SSM整合就不多說了，網上有很多博客和例子整合。
1.mybatis.xml配置
<configuration> <plugins> <plugin interceptor="com.github.pagehelper.PageHelper"> <property name="dialect" value="mysql" /> <property name="pageSizeZero" value="true" /> <property name="offsetAsPageNum" value="true" /> <property name="reasonable" value="true" /> <property name="rowBoundsWithCount" value="true" /> </plugin> </plugins> </configuration>
2.service
public PageInfo page(pageNum, pageSize){
PageHelper.startPage(pageNum, pageSize);
List<ShopNav> lists = navService.getAllNav();
PageInfo<ShopNav> pageInfo = new PageInfo<ShopNav>(lists);
return PageInfo;
}
頁面效果展示
如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：
Bootstrap學習教程
Bootstrap實戰教程
Bootstrap插件使用教程
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
