本文分页采用插件托管地址：
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>