JS封装分页插件(超级简单)

最新推荐文章于 2024-05-10 22:28:18 发布

水货——鲈鱼

最新推荐文章于 2024-05-10 22:28:18 发布

阅读量641

点赞数

文章标签： javascript css jquery

本文链接：https://blog.csdn.net/weixin_41162427/article/details/107809883

版权

在这里插入图片描述

注意点

首先需要引入Bootstrap的css文件

引入Jquery的js文件

自定义json格式的模拟数据，我将模拟数据放置在main.js中，也可以放置在其他地方，但是记住需要引用。

//json格式模拟数据
let users = [
    {id: 20201, name: "linda1", zy: "Computer"},
    {id: 20202, name: "Tinda2", zy: "Computer"},
    {id: 20203, name: "Cinda3", zy: "Chinese"},
    {id: 20204, name: "Sinda4", zy: "Math"},
    {id: 20205, name: "Ainda5", zy: "English"},
    {id: 20206, name: "Binda6", zy: "PE"},
];

//index.html
<!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">
    <title>分页</title>
    <link rel="stylesheet" href="comm/bootstrap/css/bootstrap.css">
    <style>
        input{
            border: 1px solid #ccc;
            padding: 3px 0px;
            border-radius: 3px;
            padding-left:5px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row mt-5">
        <table class="table table-bordered table-striped table-hover table-sm">
            <thead>
            <tr>
                <th>学生学号</th>
                <th>学生姓名</th>
                <th>学生专业</th>
            </tr>
            </thead>
            <tbody id="user-list">
            </tbody>
        </table>
    </div>
    <div class="row justify-content-center">
        <nav aria-label="...">
            <ul class="pagination pagination-lg">
                <li class="page-item active" aria-current="page">
                    <span class="page-link">1</span>
                </li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
            </ul>
        </nav>
    </div>
</div>
<script src="comm/jQuery/jquery-3.3.1.js"></script>
<script src="main.js"></script>
</body>
</html>

//main.js 封装

let users = [
    {id: 20201, name: "linda1", zy: "Computer"},
    {id: 20202, name: "Tinda2", zy: "Computer"},
    {id: 20203, name: "Cinda3", zy: "Chinese"},
    {id: 20204, name: "Sinda4", zy: "Math"},
    {id: 20205, name: "Ainda5", zy: "English"},
    {id: 20206, name: "Binda6", zy: "PE"},
];

jQuery.extend({

    Page:function(pageCount,pageSize,tempArr){
        function getList(pageCount,pageSize,tempArr) {
            let oTbody = $("#user-list");
            //将表格内容情况
            oTbody.html('');
            let startRow=(pageCount-1)*pageSize;
            let endRow=startRow+pageSize-1;
            endRow=endRow>=tempArr.length?tempArr.length-1:endRow;
            for (let i = startRow; i <= endRow; i++) {
                let obj = tempArr[i];
                oTbody.append(`<tr>
                            <td>${obj.id}</td>
                            <td>${obj.name}</td>
                            <td>${obj.zy}</td>
                        </tr>`);
            }
            if(pageCount == Math.ceil(tempArr.length / pageSize) && tempArr.length%pageSize != 0 ){
                for(let j =  tempArr.length%pageSize; j<pageSize; j++){
                    oTbody.append(`<tr>
                        <td>&nbsp;</td>
                        <td></td>
                        <td></td>
                    </tr>`);
                }
            }else if(tempArr.length == 0){
                for(let j =  1; j<=pageSize; j++){
                    oTbody.append(`<tr>
                        <td>&nbsp;</td>
                        <td></td>
                        <td></td>
                    </tr>`);
                }
            }
        }


        function getPageSum(pageSize,tempArr){
            let pageSum=tempArr.length/pageSize;
            pageSum = Math.ceil(pageSum)
            const pagination = $(".pagination")
            pagination.html("")
            for (let i = 1; i <= pageSum; i++) {
                if(i == 1){
                    pagination.append(`<li class="page-item active"><a class="page-link" href="#">${i}</a></li>`);
                }else{
                    pagination.append(`<li class="page-item"><a class="page-link" href="#">${i}</a></li>`);
                }
            }
        }


        getList(pageCount, pageSize,tempArr);
        getPageSum(pageSize,tempArr);


        $(document).on("click", ".page-item",function (e) {
            let pageCount = $(e.target).text();
            getList(pageCount, pageSize, tempArr)
            $(".page-item").each((index,item)=>{
                $(item).removeClass("active")
            })
            $(e.target).parent().addClass("active")
        })
    }
})

//============================
//调用接口
let p=$.Page(1,5,users);

水货——鲈鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS封装分页插件(超级简单)

注意点首先需要引入Bootstrap的css文件引入Jquery的js文件自定义json格式的模拟数据，我将模拟数据放置在main.js中，也可以放置在其他地方，但是记住需要引用。//json格式模拟数据let users = [ {id: 20201, name: "linda1", zy: "Computer"}, {id: 20202, name: "Tinda2", zy: "Computer"}, {id: 20203, name: "Cinda3", zy..
复制链接

扫一扫