jquery，bootstrap实现页码选择

最新推荐文章于 2023-09-13 21:05:50 发布

桐浦

最新推荐文章于 2023-09-13 21:05:50 发布

阅读量182

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_51188380/article/details/129161954

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./res/css2022/bootstrap-4.6.1-dist/css/bootstrap.css">
    <script src="./res/css2022/js/jquery-3.5.1.min.js"></script>
</head>

<body>
    <div class="fenye">
        <ul class="pagination">
            <li class="page-item {#[class]#}" data-index="{#[index]#}"><a class="page-link" style="cursor: pointer;">{#[page]#}</a></li>
        </ul>
    </div>
</body>
<script>
    
    var html = $(".pagination").html();
    $(".pagination").html('');

    var pageOptions = {
        PageIndex: 1, //当前页码
        RecordCount: 100, //总页数
        TotalPage: 10, //一页多少条
        showPageCount: 0, //页面显示页码数量
    }

    pageOptions.showPageCount = pageOptions.RecordCount / pageOptions.TotalPage;

    function bianli(html,json){
        for (const key in json) {
            html = html.replace("{#["+key+"]#}",json[key])
        }
        return html
    }

    function aaa(){
        $(".pagination").html('');
        $(".pagination").append(bianli(html,{index:pageOptions.PageIndex <= 1?1:pageOptions.PageIndex-1,page:'上一页',class:1 == pageOptions.PageIndex?'disabled':''}))
        if(pageOptions.PageIndex <= 3){
            for (let i = 1; i < 6; i++) {
                $(".pagination").append(bianli(html,{index: i,page:i,class:i == pageOptions.PageIndex?'active':''}))
            }
        }else if(pageOptions.PageIndex >= pageOptions.showPageCount-2){
            for (let i = pageOptions.showPageCount-4; i < pageOptions.showPageCount + 1; i++) {
                $(".pagination").append(bianli(html,{index: i,page:i,class:i == pageOptions.PageIndex?'active':''}))
            }
        }else{
            for (let i = pageOptions.PageIndex - 2; i < pageOptions.PageIndex + 3; i++) {
                $(".pagination").append(bianli(html,{index: i,page:i,class:i == pageOptions.PageIndex?'active':''}))
            }
        }
        $(".pagination").append(bianli(html,{index:pageOptions.PageIndex >= pageOptions.showPageCount-1?pageOptions.showPageCount:pageOptions.PageIndex+1,page:'下一页',class:pageOptions.showPageCount == pageOptions.PageIndex?'disabled':''}))
        $(".pagination>li").click(function(){
            pageOptions.PageIndex = parseInt($(this).attr("data-index"));
            aaa();
        })
    };

    aaa();


</script>

</html>