分页插件

最新推荐文章于 2021-11-08 13:41:26 发布

滴滴咚咚咚

最新推荐文章于 2021-11-08 13:41:26 发布

阅读量147

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/darkCloudss/article/details/103028722

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

借鉴加总结

<!DOCTYPE html>
<html>
<head>
	<title>分页</title>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
	<!--    分页插件-->
    <link rel="stylesheet" type="text/css" href="./css/pageNav1/pageNav.css" />
    <!--    <script src="../js/creative/pageNav1/pageNav.js" type="text/javascript"></script>-->
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
      <!--    分页插件-->
    <script src="./js/pageNav1/pageNav.js" type="text/javascript"></script>
</head>
<body>

<!--分页-->
    <div style="background-color:#fff;width:100%;height:80px;position:fixed;bottom:0px;">
        <nav aria-label="Page navigation" class="page-nav-outer" id="PageNavId" style="">
        </nav>
    </div>

</body>

<script type="">
	//分页器
var pubPageCount;
function initPage(pageCount){
    pubPageCount = pageCount;
    var pageNavObj = null;//用于储存分页对象
    pageNavObj = new PageNavCreate("PageNavId",{ pageCount:pageCount, currentPage:1, perPageNum:5, });
    pageNavObj.afterClick(pageNavCallBack);
}
function pageNavCallBack(clickPage){
    //clickPage是被点击的目标页码
    navs(clickPage);
    //一般来说可以在这里通过clickPage,执行AJAX请求取数来重写页面
    // pageNavCreate("PageNav",pubPageCount,clickPage,pageNavCallBack);
    pageNavObj = new PageNavCreate("PageNavId",{
        pageCount:pubPageCount,//总页数
        currentPage:clickPage,//当前页
        perPageNum:100,//每页按钮数
    });
    pageNavObj.afterClick(pageNavCallBack);
    $(window).scrollTop(0);// 数据展示后回到顶部
}

function navs(page){
	page = 1 || page;
	var totalCount = 200;//总数为200条
	if(page === 1){
        initPage(Math.ceil(totalCount/50));//初始化，每页50条
    }
}
navs(1);
</script>
</html>

在这里插入图片描述