分页器

分页器
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/jquery-3.1.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #content {
            list-style: none;
        }

        #content>li {
            height: 50px;
            line-height: 50px;
            text-indent: 20px;
            border-bottom: 1px solid;
        }

        #page span {
            display: inline-block;
            padding: 3px 8px;
            border: 1px solid;
            margin: 5px;
            cursor: pointer;
        }

        .active {
            color: red;
        }
    </style>
</head>

<body>
    <ul id="content">

    </ul>
    <div id="page">

    </div>
</body>
<script>
    var arr = [
        "凉面","麻辣烫","澳洲龙虾","砂锅面",
        "王婆大虾","果粒奶优","重庆火锅","三明治",
        "烧烤","海鲜","火鸡面","乱炖",
        "蜜雪冰城","百度饮品","泡椒风爪","大米饭",
        "酸奶","泡泡糖","鸡叉骨"
        ]
    // 封装
    function slidePage(opt) {
        var opt = opt || {};
        // 数据
        opt.data = opt.data || []
        // 定义变量 -- 每页存放的数据条数
        opt.pageCount = opt.pageCount || 5;
        // 定义变量 -- 总共有几页
        opt.pageNum = Math.ceil(opt.data.length / opt.pageCount);
        // 默认页数 --  注意这里不是下标  而是第几页
        opt.page = opt.page || 1;
        for (var i = 0; i < opt.pageNum; i++) {
            $("#page").append("<span>" + (i + 1) + "</span>")
        }
        // 默认页显示出来的样式
        $("#page>span").eq(opt.page - 1).addClass("active")
        fy()
        // 点击页数   实现分页
        // 封装一个函数
        function fy() {
            var arr1 = arr.filter((item, index) => {
                return index >= (opt.page - 1) * opt.pageCount && index < opt.page * opt.pageCount
            })
            // 每次点击时清空
            $("#content").html("")
            for (var i = 0; i < arr1.length; i++) {
                $("#content").append("<li>" + arr1[i] + "</li>")

            }
        }
        $("#page>span").click(function () {
            opt.page = $(this).index() + 1;
            $(this).addClass("active").siblings().removeClass("active")
            fy();

        })
    }
    slidePage({
        data:arr
    })
</script>

</html>
推荐阅读更多精彩内容
