jquery简单分页

Html

Css

* {
	margin:0;
	padding:0;
	list-style:none;
}
.wrapper {
	width:500px;
	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;
	border:1px solid black;
}
.btn {
	float:right;
}

$(document).ready(function() {
    /*添加100条数据（模仿后台传入）*/
    for (var i = 1; i < 21; i++) {
        $("#content").append("<li>" + i + "</li>");
    }
    /*设置每页显示的条数*/
    $every_page = 5;
    $items = $("ul li");
    $total_all = $items.length; //总条数
    $page_num = Math.round($total_all / $every_page) //向上取整（2.5 ==> 3）

$("#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;
        }
    })
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jquery简单分页



代码描述：jquery简单分页

更新时间：2024-01-02 14:48:41
以上是原生javascriptt实现简单分页的全部代码，你可以根据需要进行样式和功能的自定义和扩展。希望对你有所帮助

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

高莹

相关代码

jquery简单分页

最新