关于若依前端分页首次使用BootstrapPager 即bootstrap扩展插件

本文分页采用插件托管地址：

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>

 



posted @ 2021-02-18 17:46  码哥之旅  阅读(1682)  评论(1)  编辑  收藏  举报