js,jq实现分页效果

<!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>
        * {
            padding: 0;
            margin: 0;
        }

        ul li {
            list-style: none;
        }

        ul {
            display: flex;
            /* justify-content: center; */
            align-items: center;
            width: 600px;
            margin: 10px 0;
        }

        ul li {
            min-width: 40px;
            height: 40px;
            border: 1px solid rgb(64, 176, 228);
            color: rgb(64, 176, 228);
            font-size: 18px;
            text-align: center;
            line-height: 40px;
            margin: 0 5px;
            cursor: pointer;
            user-select: none;
        }

        ul li.ctrl {
            width: 90px;
        }

        ul li:hover {
            background-color: rgb(64, 176, 228);
            color: #fff;
        }

        ul li.active {
            background-color: rgb(64, 176, 228);
            color: #fff;
        }

        ul li.ctrl.disabled {
            border-color: #ccc;
            background-color: #eee;
            color: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>

<body>
    <script src="../JQ/JQuery.js"></script>
    <script>
        $(function () {
            let arr = [11, 22, 33, 44, 55, 66, 77, 77, 87, 97, 76, 74, 67]

            function getPageCount(data, pageSize) {//计算总页数的方法
                let pageCount = Math.ceil(data.length / pageSize)
                return pageCount
            }

            function getList(data, pageIndex, pageSize) {//第几页调出哪几条的数据
                let start = (pageIndex - 1) * pageSize
                let end = start + pageSize
                return data.slice(start, end)
            }
            let PageCount = getPageCount(arr, 3)
            //以下为创建各节点
            let ul = $('
    ') ul.append(`
  • 首页
  • `
    ) for (let i = 0; i < PageCount; i++) { let li = $('
  • ').text(i + 1) if (i === 0) li.addClass('active') ul.append(li) } ul.append(`
  • 末页
  • `
    ) $('body').append(ul) let index = 1 //各页数的点击事件 $('li:not(.ctrl)').click(function () { index = parseInt($(this).text()) console.log(1); checkDisable() }) //下一页的点击事件 $('.next').click(function () { if (index === PageCount) return index++ checkDisable() }) //上一页的点击事件 $('.prev').click(function () { if (index === 1) return index-- checkDisable() }) //首页的点击事件 $('.first').click(function () { index = 1 checkDisable() }) //尾页的点击事件 $('.last').click(function () { index = PageCount checkDisable() }) //判断页数,添加移除类 function checkDisable() { $('li:not(.ctrl)').eq(index - 1).addClass('active').siblings('.active').removeClass( 'active')//给页数添加移除样式 $('.ctrl').removeClass('disabled')//清除首页,上一页,下一页,尾页的disabled样式 if (index === 1) $('.first,.prev').addClass('disabled')//给首页,上一页添加disabled样式 if (index === PageCount) $('.last,.next').addClass('disabled')//给下一页,尾页添加disabled样式 console.log(getList(arr,index,3)); } }) </script> </body> </html>

你可能感兴趣的:(js,jq实现分页效果)