【javascript】html+原生js实现分页功能

1、分页功能实现效果如下：
2、代码如下
<!DOCTYPE html >
<html>
<head>
    <title> 消息呈现 </title>
    <link rel="icon" href="picture.ico" type="image/x-icon" />
    <script src="../js/jquery.min.js"></script>
        <style type="text/css">
        .title {
            padding:5px;
            background: #F7F7F7;
            text-align: center;
            vertical-align: middle;
            border-radius: 12px;
            margin-bottom: 16px;
            margin-top: 10px;
            color: #616161;
            font-size: 16px;
        }
 
        .font {
            color: #00a5e0;
            font-size: 14px;
        }
 
        .paging {
            width: 1660px;
            height: 40px;
            background: #EFF3F8;
            padding-top: 8px;
            padding-left: 30px;
            margin-top: 20px;
        }
 
        .page-font {
            color: #292929;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="ui-tab">
    <!-- 具体消息内容 -->
    </div>
    <div class="paging">
    <!-- 分页布局-->
        <table>
            <tr class="page-font">
                <td width=""><img src="../image/first.png" width="24px" height="25px" class="firstPage" onclick="page_click(this)" /></td>
                <td><img src="../image/before.png" width="27px" height="22px" class="beforePage" onclick="page_click(this)" /></td>
                <td>&nbsp;&nbsp;|&nbsp;第<input type="button" class="currentPage" value="1" readonly="readonly">页</td>
                <td>&nbsp;&nbsp;&nbsp;共<input type="button" class="totalPage" value="1" readonly="readonly">页&nbsp;|&nbsp;&nbsp;</td>
                <td><img src="../image/next.png" width="27px" height="26px" class="nextPage" onclick="page_click(this)" /></td>
                <td><img src="../image/last.png" width="27px" height="24px" class="lastPage" onclick="page_click(this)" /></td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        var totalPage = 10; //一共多少页
        var currentPage = 1;//当前页码
        var information_lenght = []
        //前端获取后台数据并呈现方法
        function information_display() {
            var data = [
                { "title": "第一页-今日日志"},
                { "title": "第一页-今日日志"},
            ];
            $(".ui-tab").empty()
            $.each(data, function (index, n) {
                var infor_title = "<table  class="title">"
                    + "<tr >"
                    + "<td>" + data[index].title + "</td>"
                    + "</tr>"
                    + "</table>";
                $(".ui-tab").append(infor_title)
            })
        }
        //为测试分页功能代码，进行网络请求后便不需要
        function information_display2() {
            var data = [
                { "title": "第二页-今日日志反反复复付付付"}
            ];
            $(".ui-tab").empty()
            $.each(data, function (index, n) {
                var infor_title = "<table  class="title">"
                    + "<tr >"
                    + "<td>" + data[index].title + "</td>"
                    + "</tr>"
                    + "</table>";
                $(".ui-tab").append(infor_title)
            })
        }
        //初始化加载，分页首页数据，输入：每页多少条数据，当前页（默认为1）；输出：当前页数据和总页数
        window.onload = function () {
            $(".totalPage").attr("value", totalPage)
            information_display()
        }
        //上一页、下一页，首页和尾页的单击触发事件
        function page_click(item) {
            console.log(item)
            //首页
            if ($(item).attr("class") == "firstPage") {
                console.log("firstPage")
                pageNumber = parseInt($(".currentPage").attr("value"));
                $(".currentPage").attr("value", 1)
            }
            //上一页
            else if ($(item).attr("class") == "beforePage") {
                console.log("beforePage")
                pageNumber = parseInt($(".currentPage").attr("value"));
                if (pageNumber > 1) {
                    $(".currentPage").attr("value", pageNumber - 1)
                    information_display()
                }
                else {
                    $(".beforePage").attr("disabled", false)
                }
            }
            //下一页
            else if ($(item).attr("class") == "nextPage") {
                console.log("nextPage")
                pageNumber = parseInt($(".currentPage").attr("value"));
                if (pageNumber < totalPage) {
                    $(".currentPage").attr("value", pageNumber + 1)
                    information_display2()
                }
                else {
                    $(".nextPage").attr("disabled", false)
                }
            }
            //尾页
            else {
                console.log("lastPage")
                pageNumber = parseInt($(".currentPage").attr("value"));
                $(".currentPage").attr("value", totalPage)
            }
        }
    </script>
</body>
</html>
转自：https://blog.csdn.net/zrcj0706/article/details/95043343