jQuery分页

渣娃程序员

已于 2024-04-01 11:45:04 修改

阅读量799

点赞数

文章标签： jquery javascript css

于 2022-01-20 11:47:44 首次发布

本文链接：https://blog.csdn.net/Hellos_Worlds/article/details/122598357

版权

注: 只引用了jquery-1.8.2版本的脚本,其余版本的jquery脚本也可以

css样式:

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wrapper {
    width: 800px;
    margin: 50px auto;
}

/*清除浮动*/
.wrapper::after {
    content: "";
    display: block;
    clear: both;
}

ul li {
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 30px;
    float: left;
    background: #ccc;
    margin: 10px 0px;
}

a {
    cursor: pointer;
}

.btn {
    float: right;
}

body主体内容:

<body>
<div class="wrapper">
    <div class="items">
        <ul id="content">

        </ul>
    </div>
    <span class="btn">
            <a id="firstPage">首页</a>
            <a id="pre_page">上一页</a>
            <span>
                <span id="current_page">1</span>
                <span>/</span>
                <span id="total_page"></span>
            </span>
            <a id="next_page">下一页</a>
            <a id="lastPage">尾页</a>
        </span>
</div>
</body>

js脚本内容:

/*添加100条数据（模仿后台传入）*/
    for (var i = 1; i <= 100; i++) {
        $("#content").append(" <li><p>Claudius Leibfritz" + i + "</p></li>");
    }
    /*设置每页显示的条数*/
    $every_page = 6;
    $items = $("ul li");
    $total_all = $items.length;//总条数
    if ($total_all % $every_page == 0) {
        $page_num = $total_all / $every_page;
    } else {
        $page_num = $total_all % $every_page + 1;
    }

    $("#total_page").text($page_num);
    //初始化页面，只显示前5条。
    $("ul li:gt(" + ($every_page - 1) + ")").each(function () {
        $(this).hide();
    })


    //点击下一条按钮函数
    // /**
    //  * 下一页
    //  */
    $("#next_page").click(function () {
        $current_page = ($("#current_page").text());//获取当前页码
        if ($current_page < $page_num) {
            $("#current_page").text(++$current_page);
            $.each($("ul li"), function (index, item) {
                //获取下一页显示的开始索引。
                var start = ($("#current_page").text() - 1) * $every_page;
                if (index >= start && index < start + $every_page) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            })
        } else {
            return false;
        }
    })
    // /**
    //  * 上一页
    //  */
    $("#pre_page").click(function () {
        $current_page = ($("#current_page").text());
        if ($current_page > 1) {
            $("#current_page").text(--$current_page);
            $.each($("ul li"), function (index, item) {
                var start = ($("#current_page").text() - 1) * $every_page;
                if (index >= start && index < start + $every_page) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            })
        } else {
            return false;
        }
    });
    // /**
    //  * 点击回到第一页
    //  */
    $('#firstPage').click(function () {
        $current_page = ($("#current_page").text());
        if ($current_page > 1) {
            $("#current_page").text(1);
            $.each($("ul li"), function (index, item) {
                var start = ($("#current_page").text() - 1) * $every_page;
                if (index >= start && index < start + $every_page) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            })
        } else {
            return false;
        }
    });
    // /**
    //  * 点击显示最后一页
    //  */
    $('#lastPage').click(function () {
        $current_page = ($("#current_page").text());
        if ($current_page < $page_num) {
            $("#current_page").text($page_num);
            $.each($("ul li"), function (index, item) {
                var start = ($("#current_page").text() - 1) * $every_page;
                if (index >= start && index < start + $every_page) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            })
        } else {
            return false;
        }
    });
})

渣娃程序员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery分页

注: 只引用了jquery-1.8.2版本的脚本,其余版本的jquery脚本也可以css样式:* { margin: 0; padding: 0; list-style: none;}.wrapper { width: 800px; margin: 50px auto;}/*清除浮动*/.wrapper::after { content: ""; display: block; clear: both;}ul li
复制链接

扫一扫