使用JS实现纯分页原理以及实现

最新推荐文章于 2021-12-08 16:16:13 发布

廖子默

最新推荐文章于 2021-12-08 16:16:13 发布

阅读量2.9k

点赞数 12

分类专栏： JS学习笔记

本文链接：https://blog.csdn.net/weixin_42341232/article/details/102535378

版权

JS学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

写在前面

好久没写博客了，因为实习工作好忙，还要同时兼顾毕业设计，最主要的是我现在是前端实习，哈哈，我一个在大学学了这么久后端开发的人，结果人生第一份正式的实习工作是前端。现在做了一个月了，自学了很多的前端知识，也对前端有了更多的了解，发现以前的认知都是错误的，什么前端简单，谁再说这句话我会认为他是一个ZZ。还有最后就是其实作为一个软件开发的人，技术栈一定要广，然后才深入几个。

不说废话了—实现原理

我们知道后台是可以用sql语句实现分页查询的。那么js的纯分页原理是先将数据全部查询出来，然后按需显示，这样也是可以实现分页效果的。

写出这个分页效果前需要明白的概念

1：总页数（计算的得出）
2：总记录数（查询得出）
3：显示行数（用户定义）
4：当前页数（变量）
5：开始位置（计算得出）
6：结束位置（计算得出）
流程如下
一：
首先我们可以根据查询出来的总记录数和用户定义的显示行数（在页面要显示多少条记录），得出总页数，两个相除即可，但是要明白一个道理，就是总记录数是10，用户要求一页显示3条记录，那么应该分4页才对，所以要针对两个数相出不是一个整数的情况作取整+1操作【（10/3）+1】

二：
然后再根据当前页数和显示行数得出开始位置，就是用【当前位置-1】*【显示行数】+1
我画个图你就明白了
在这里插入图片描述
三：
最后就是结束位置也要判断是不是最后一条记录了。

代码实现

首先是前端界面显示

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

<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>
    <link rel="stylesheet" href="page.css">
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> 
    <script src="page.js"></script>
</head>

<body>
    <table width="950" cellpadding="0" cellspacing="0" class="table2" align="center">
          
            <tr align="center">
                    <th class="td2" height="33" width="150">id</th>
                    <th class="td2">用户名</th>
                    <th class="td2">联系方式</th>
                    <th class="td2">性别</th>
                </tr>


            <tbody id="adminTbody">


                <tr>
                    <td>1</td>
                    <td>小明</td>
                    <td>123</td>
                    <td>男</td>
            </tr <tr>
                <td>2</td>
                <td>小明</td>
                <td>123</td>
                <td>男</td>
                </tr>

            <tr>
                    <td>3</td>
                    <td>小明</td>
                    <td>123</td>
                    <td>男</td>
                    </tr>
            <tr>
                    <td>4</td>
                    <td>小明</td>
                    <td>123</td>
                    <td>男</td>
                    </tr>
            <tr>
                    <td>5</td>
                    <td>小明</td>
                    <td>123</td>
                    <td>男</td>
                    </tr>
            <tr>
                    <td>6</td>
                    <td>小明</td>
                    <td>123</td>
                    <td>男</td>
                    </tr>
            <tr>
                    <td>7</td>
                    <td>小明</td>
                    <td>123</td>
                    <td>男</td>
                    </tr>
            <tr>
                    <td>8</td>
                    <td>小明</td>
                    <td>123</td>
                    <td>男</td>
                    </tr>
            <tr>
                    <td>9</td>
                    <td>小明</td>
                    <td>123</td>
                    <td>男</td>
                    </tr>
            <tr>
                    <td>10</td>
                    <td>小明</td>
                    <td>123</td>
                    <td>男</td>
                    </tr>               
        </tbody>
    </table>
    <div id="barcon" class="barcon">
        <!-- 这部分是显示分页的提示信息 -->
            <div id="barcon1" class="barcon1"></div>
                <div id="barcon2" class="barcon2">
                        <ul>
                                <li><a href="###" id="firstPage">首页</a></li>
                                <li><a href="###" id="prePage">上一页</a></li>
                                <li><a href="###" id="nextPage">下一页</a></li>
                                <li><a href="###" id="lastPage">尾页</a></li>
                                <li><select id="jumpWhere">
                                        </select></li>
                                <li><a href="javascript:;" id="jumpPage" onclick="jumpPage()">跳转</a></li>
                            </ul>
                    </div>
    </div>
</body>

</html>

可以看出，我用静态数据模拟，我写了10条数据来模拟，你实际可以通过后台获取
这是没有任何js效果的显示图，全部数据展示
在这里插入图片描述
这是页面的css效果

.table2 {
    border: #C8C8C8 solid;
    border-width: 1px 0px 0px 1px;
    background: #F3F0F0;
    margin-top: 25px;
}

.td0 {
    border: #C8C8C8 solid;
    border-width: 0 0 1px 0;
}

.td2 {
    border: #C8C8C8 solid;
    border-width: 0 1px 1px 0;
}

.barcon {
    width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.barcon1 {
    font-size: 17px;
    float: left;
    margin-top: 20px;
}

.barcon2 {
    float: right;
}

.barcon2 ul {
    margin: 20px 0;
    padding-left: 0;
    list-style: none;
    text-align: center;
}

.barcon2 li {
    display: inline;
}

.barcon2 a {
    font-size: 16px;
    font-weight: normal;
    display: inline-block;
    padding: 5px;
    padding-top: 0;
    color: black;
    border: 1px solid #ddd;
    background-color: #fff;
}

.barcon2 a:hover {
    background-color: #eee;
}

.ban {
    opacity: .4;
}

然后就写JS来实现

$(function () {
    //开始初始化为第一页数据
    goPage(1, 3); 
    var tempOption = "";
    for (var i = 1; i <= totalPage; i++) {
        tempOption += '<option value=' + i + '>' + i + '</option>' //给下拉框传入分页数
    }
    $("#jumpWhere").html(tempOption);
})


var pageSize = 0; //每页显示行数
var currentPage_ = 1; //当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。
var totalPage; //总页数

//封装分页函数
function goPage(pno, psize) {
    var itable = document.getElementById("adminTbody");
    var num = itable.rows.length; //表格所有行数(所有记录数，这是一个数组)

    pageSize = psize; //每页显示行数
    //总共分几页,针对相除不为整数的情况作+1操作
    if (num / pageSize > parseInt(num / pageSize)) {
        totalPage = parseInt(num / pageSize) + 1;
    } else {
        totalPage = parseInt(num / pageSize);
    }
    var currentPage = pno; //当前页数
    currentPage_ = currentPage;
    var startRow = (currentPage - 1) * pageSize + 1;//计算开始位置
    var endRow = currentPage * pageSize;//判断结束位置是否为最后一条记录
    endRow = (endRow > num) ? num : endRow;
   
    // 先将所有数据隐藏
    $("#adminTbody tr").hide();
    // 将符合条件的显示
    // 数组是从0开始计算的，故而显示下一页的开始要用开始也-1（比如第二页从4开始的，则0 1 2 3，for循环就从3开始）
    for (var i = startRow - 1; i < endRow; i++) {
        $("#adminTbody tr").eq(i).show();
    }
    // 设置提示信息
    var tempStr = "共" + num + "条记录 分" + totalPage + "页 当前第" + currentPage + "页";
    document.getElementById("barcon1").innerHTML = tempStr;

    // 先根据当前页的值判断是不是处于第一页
    if (currentPage > 1) {
        // 不是就可以点击首页按钮和下一页同时移除灰色样式
        $("#firstPage").on("click", function () {
            goPage(1, psize);
        }).removeClass("ban");
        // 点击上一页就让当前页-1在调用本身
        $("#prePage").on("click", function () {
            goPage(currentPage - 1, psize);
        }).removeClass("ban");
    } else {
        // 当处于首页的时候让首页按钮和第一页按钮无法点击，同时变成灰色
        $("#firstPage").off("click").addClass("ban");
        $("#prePage").off("click").addClass("ban");
    }

    if (currentPage < totalPage) {
        // 除了最后一页那么都是可以点击下一页和末尾页
        $("#nextPage").on("click", function () {
            // 重新调用本身，让当前页+1（我们初始化了当前页为1，点击下一页就让它+1）
            goPage(currentPage + 1, psize);
        }).removeClass("ban")
        $("#lastPage").on("click", function () {
            // 直接跳到最后一页
            goPage(totalPage, psize);
        }).removeClass("ban")
    } else {
        // 那么这部分就是处于最后一页了
        $("#nextPage").off("click").addClass("ban");
        $("#lastPage").off("click").addClass("ban");
    }
    // 把当前页显示在下拉框上
    $("#jumpWhere").val(currentPage);
}


// 快速跳转函数
function jumpPage() {
    // 得到用户选择的第几页数，记得要转换成数字
    var num = parseInt($("#jumpWhere").val());
    // 利用全局变量判断是不是处于相同的页面，是就不跳，不是就跳
    if (num != currentPage_) {
        goPage(num, pageSize);
    }
}

函数其实比较简单，就是利用我们开始说的原理，主要是记得开始调用的时候初始化为第一页。

最后效果

在这里插入图片描述
点击下一页

最后一页

最后一说，虽然这样实现了分页，但是我感觉这样不符合实际生产，毕竟工作的时候一般都是拿到json数据，然后进行处理的，而且数据一般非常多，全部显示在页面显然不明智，所以应该结合ajax异步加载，现在我还不会，回头学会补上。

说实话其实前端挺有意思的，特别是js+css之后就更好玩了。学习使我快乐，怎么我在大学就没有体会这样的乐趣呢？？？哎~~

廖子默

关注

12
点赞
踩
23

收藏

觉得还不错? 一键收藏
4
评论
使用JS实现纯分页原理以及实现

写在前面好久没写博客了，因为实习工作好忙，还要同时兼顾毕业设计，最主要的是我现在是前端实习，哈哈，我一个在大学学了这么久后端开发的人，结果人生第一份正式的实习工作是前端。现在做了一个月了，自学了很多的前端知识，也对前端有了更多的了解，发现以前的认知都是错误的，什么前端简单，谁再说这句话我会认为他是一个ZZ。还有最后就是其实作为一个软件开发的人，技术栈一定要广，然后才深入几个。不说废话了—实...
复制链接

扫一扫

专栏目录