使用html+js书写分页功能

最新推荐文章于 2023-01-06 10:12:20 发布

霜月枫桥

最新推荐文章于 2023-01-06 10:12:20 发布

阅读量449

点赞数

分类专栏： HTML&HTML5 文章标签： js html5

本文链接：https://blog.csdn.net/MOONCOM/article/details/119775335

版权

HTML&HTML5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,li{
            margin:0;
            padding:0;
            list-style: none;
        }
        .v-pagination{
            display:flex;
            align-items: center;
        }
        .v-pagination .pagination-page{
            display:flex;
            align-items: center;
            margin-left:40px;
        }
        .v-pagination .page{
            height: 28px;
            line-height: 28px;
            margin: 0 5px;
            background-color: #f4f4f5;
            color: #606266;
            min-width: 30px;
            text-align: center;
            border-radius: 2px;
            font-size:13px;
            cursor: pointer;
        }
        .v-pagination .page.selected{
            background-color: #409eff;
            color: #fff;
        }
    </style>
</head>
<body>
    <!-- 隐藏的数据总数 -->
    <span class="data-total" style="display:none">123</span>
    <div class="v-pagination">
        <span class="total">总数为：0</span>
        <ul class="pagination-page">
            
        </ul>
    </div>    
    <script>
        // 获取URL上的参数，返回参数对象
        function getURLParams(url=""){
          const result = {};
          if(url.includes('?') === true){
            url.split('?')[1].split('&').map(item=>{
              const [key,value] = item.split('=');
              result[key] = value;
            });
          }
          return result;
        }
        // 将对象装换成url上的查询参数
        function rechangeURL(url='',json={}){
            let path = url.split('?')[0];
            Object.keys(json).forEach((key,index)=>{
                console.log(key,index);
                path += index === 0 ? '?' : '&';
                path += `${key}=${json[key]}`;
            });
            return path;
        }

        // 根据数据总数、每页大小、当前的下标展示不同的分页
        function generatePage(total = 0,pageSize = 10,currentPage = 1){
            // 总条数
            const theTotal = Number(total);
            // 每页大小
            const thePageSize = Number(pageSize);
            // 当前页
            const theCurrentPage = Number(currentPage);
            if(isNaN(theTotal) || isNaN(thePageSize) || isNaN(theCurrentPage)){
                return '传入的参数必须为数字，或者字符串类型的数字';
            }
            // 总页数
            const totalPage = Math.ceil(theTotal / thePageSize) || 1;
            // 当前下标减1的元素
            let html = `<li class="page" index="${theCurrentPage - 1 < 1 ? 1 : theCurrentPage - 1}"><</li>`;
            if(totalPage <= 5){
                // 当总页数不满5页时
                for(let i = 1 ;i <= totalPage; i++){
                    if(i === theCurrentPage){
                        html += `<li class="page selected" index="${i}">${i}</li>`;
                    }else{
                        html += `<li class="page" index="${i}">${i}</li>`;
                    }
                }
            }else{
                // 当总页数超过5页时
                if(theCurrentPage - 2 > 1){
                    // 在最开始增加【第1页】和【...页】
                    html += `
                        <li class="page" index="1">1</li>
                        <li class="page" index="${theCurrentPage - 5 < 1 ? 1 : theCurrentPage - 5}">...</li>
                    `
                }
                // 具体展示的开头
                const begin = theCurrentPage - 2 < 1 ? 1: theCurrentPage - 2;
                // 具体展示的结尾
                const end = theCurrentPage + 2 > totalPage ? totalPage : theCurrentPage + 2;
                for(let i =  begin;i <= end; i++){
                    if(i === theCurrentPage){
                        html += `<li class="page selected" index="${i}">${i}</li>`;
                    }else{
                        html += `<li class="page" index="${i}">${i}</li>`;
                    }
                }
                if(theCurrentPage + 2 < totalPage){
                    // 在最后增加【...页】和【最后页】
                    html += `
                        <li class="page" index="${theCurrentPage + 5 > totalPage ? totalPage : theCurrentPage + 5}">...</li>
                        <li class="page" index="${totalPage}">${totalPage}</li>
                    `
                }
            }
            // 当前下标加1的元素
            html += `<li class="page" index="${theCurrentPage + 1 > totalPage ? totalPage : theCurrentPage + 1}">></li>`;
            // 加载到DOM中
            document.querySelector('.v-pagination .pagination-page').innerHTML = html;
        }

        window.addEventListener('load',()=>{
            // 使用事件委托绑定分页点击事件
            document.querySelector('.v-pagination .pagination-page').addEventListener('click',function(e){
                const {nodeName,innerText} = e.target;
                const currentPage = e.target.getAttribute('index');
                if(nodeName === 'LI'){
                    // 触发的是分页的事件
                    location.href=rechangeURL(location.href,{...params,_pi:currentPage});
                }
            });

        });

        // 初始化，获取url上传递过来的当前页和分页大小
        const params = getURLParams(location.href);
        // 在DOM上获取分页大小
        const total = document.querySelector('.data-total').innerText;
        // 赋值分页总数
        document.querySelector('.total').innerText = `总数为：${total}`;
        // 生成分页元素
        generatePage(total,params._ps,params._pi);
        console.log(total,params);
    </script>
</body>
</html>

浏览器展示效果（分页的当前下标和每页大小是从地址栏获取的，展示的总条数从DOM中获取的）

霜月枫桥

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用html+js书写分页功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul,li{ .
复制链接

扫一扫