本文分頁采用插件托管地址：
https://gitee.com/hylun/BootstrapPager?_from=gitee_search
強調，本插件是從bootstrap3 基礎之上開始的，我采用bootstrap4,所以要選擇
https://gitee.com/xuzhanga/BootstrapPager/blob/master/test/demo2.html
1：下載后引入 分頁插件,(如在<head>頭部
<script src="../../ibaiqi.js/bootstrapPager.js"></script>
2:后端，采用是若依封裝返回JSON的方法如下
/** * 查詢文章列表 * @param article * @return */ @GetMapping("/list") @ApiOperation(value = "article文章列表") public TableDataInfo list(BlogsArticle article){ startPage(); List<BlogsArticle> blogsArticles = iBlogsArticleService.selectBlogsArticleList(article); return getDataTable(blogsArticles); }
3:用postMan請求，帶上第一頁，每頁顯示3條數據，看返回接口數據是否正確如下
4:先用jquery的.get()測試是否和postMan返回一致
<script type="text/javascript">
let currentPage = 1; //當前頁碼，即第幾頁
let pageSize = 5; //每頁顯示多少條
//返回文章列表
function articleList() {
$.get(
baseHref += "/api/v1/blogs/article/list", { //分頁參數傳遞，即可分頁
pageNum: currentPage,
pageSize: pageSize,
},
function(articles) {
var articleResV = "<ul>" //拼接返回文章列表
$.each(articles.rows, function(i, article) {
// console.log("article.articleTitle: ",article.articleTitle);
articleResV += "<li><a href='../../views/blogs/article.html' title=" + article.articleTitle + ">" +
subStrLength(
article.articleTitle, 60) + "</a>"
articleResV += "<div><span>熱點</span>:" + subStrLength(article.createBy, 50) + "</div></li>"
})
articleResV += "</ul>"
//把文章返回，掛載到節點上
$("#articleList").append(articleResV)
},
"json"
)
}
</script>
4：若依接供接口 bootstrap4 下此分頁
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>稅聞列表</title> <link rel="stylesheet" href="../../bootstrap-4.6.0-dist/css/bootstrap.min.css"> <link rel="stylesheet" href="../../ibaiqi.css/style.css"> <script src="../../ibaiqi.js/ibaiqi.public.js"></script> <script src="../../ibaiqi.js/jquery-3.5.1.js"></script> <script src="../../bootstrap-4.6.0-dist/js/bootstrap.bundle.js"></script> </head> <body> <script src="../../ibaiqi.js/bootstrapPager.js"></script> <!-- 引入header.html --> <div id="ib_header">header 引入后被替換</div> <!-- 文章列表 --> <div class="container"> <div id="articleList">文章列表掛載點</div> <div id="pageInfoV">分頁頁碼掛載點</div> </div> </body> </html> <script type="text/javascript"> $("#ib_header").load("../header.html") document.body.onload = function() { articleList() //顯示文章列表，等待完善 } </script> <script type="text/javascript"> // 不調用此函數，Pager.getParam('page') 會提示不是函數 Pager({ totalCount: 11, //總條數為150, }) // let currentPage = 1; //當前頁碼，即第幾頁 // let pageSize = 5; //每頁顯示多少條 /* 以上兩行修改如下----------------begin */ let currentPage = ""; //選擇當前是第幾頁 if (Pager.getParam('page') > 1) { currentPage = Pager.getParam('page') } else { currentPage = 1 } console.log("當前要請求頁碼為***********:" + currentPage) let pageSize = 5; /* 以上兩行修改如下--------------------end */ //返回文章列表 function articleList() { $.get( baseHref += "/api/v1/blogs/article/list", { //分頁參數傳遞，即可分頁 pageNum: currentPage, pageSize: pageSize, }, function(articles) { var articleResV = "<ul>" //拼接返回文章列表 $.each(articles.rows, function(i, article) { // console.log("article.articleTitle: ",article.articleTitle); articleResV += "<li><a href='../../views/blogs/article.html' title=" + article.articleTitle + ">" + subStrLength( article.articleTitle, 60) + "</a>" articleResV += "<div><span>熱點</span>:" + subStrLength(article.createBy, 50) + "</div></li>" }) articleResV += "</ul>" //把文章返回，掛載到節點上 $("#articleList").html(articleResV) //准備把頁碼寫到引出 var pageInfo = Pager({ totalCount: articles.total, //總條數為150 pageSize: pageSize, //每頁顯示6條內容，默認10 className: 'pagination', //分頁的樣式 prevButton: '上一頁', //上一頁按鈕 nextButton: '下一頁', //下一頁按鈕 firstButton: '首頁', //第一頁按鈕 lastButton: '末頁', //最后一頁按鈕 }) $("#pageInfoV").html(pageInfo) }, "json" ) } </script>