jquery分页
现在项目分页好多都是直接用插件，今天发现其实自己写页不难。主要是以前老师讲的时候没听。（对不起老何！哈哈）
今天发布一个前端超简单的分页效果,纯jQ！废话不多说，上代码。要是你们需要，直接复制过去就可以，我故意把css，js，放在一起就是为了方便copy。。注意jq版本1.7以上
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
<title>最简单的分页</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid blue;
border-radius:3px;
}
.active{
background-color: #7FFFAA;
}
</style>
</head>
<body>
<form>
#foreach($goods in $goodss)
<li>$goods.goods_name</li>
#end
<h2>最简单的分页</h2>
<ul class="pagination"></ul>
<input type="hidden" id="currentPage" name="currentPage" value="23"></input>
<input type="hidden" id="totalPage" value="54"></input>
</form>
<script>
$().ready(function(){
var curPage =$("#currentPage").val();
var last =$("#totalPage").val();
var page =Math.ceil(curPage/10);
//调用绘制分页样式函数
draw(page,curPage);
//绑定点击页码事件
$(document).on("click",".pagination li a",function(){
var str =$(this).html();
if(!isNaN(str)){
//移除之前的active
$(".pagination li a").removeClass("active");
$(this).attr("class","active");
$("#currentPage").val(str);
}
});
//绑定下一页点击事件
$(document).on("click","#nextPage",function(){
var num =$(".active").html();
var curPage =$("#currentPage").val();
var last =$("#totalPage").val();
var page =Math.ceil((parseInt(num))/10);
if(num < page*10 && num != last){
//移除之前的active
$(".pagination li a").removeClass("active");
$("#"+(parseInt(num)+1)+"").attr("class","active");
//$(".pagination li a[text="+(parseInt(num)+1)+"]").attr("class","active");//jQ1.6支持
$("#currentPage").val(parseInt(num)+1);
}else if(num == page*10 && num != last){
//清空之前的数据
$(".pagination").html("");
draw(page+1,(parseInt(num)+1));
}
})
//绑定上一页点击事件
$(document).on("click","#previousPage",function(){
var num =$(".active").html();
var curPage =$("#currentPage").val();
var last =$("#totalPage").val();
var page =Math.ceil((parseInt(num))/10);
if(num <= page*10 && num != (page-1)*10+1){
//移除之前的active
$(".pagination li a").removeClass("active");
$("#"+(parseInt(num)-1)+"").attr("class","active");
//$(".pagination li a[text="+(parseInt(num)+1)+"]").attr("class","active");//jQ1.6支持
$("#currentPage").val(parseInt(num)-1);
}else if(num == (page-1)*10+1 && num != 1){
//清空之前的数据
$(".pagination").html("");
draw(page-1,(parseInt(num)-1));
}
})
//绘制页面分页样式
function draw(page,curPage){
//页面中的当前页
var page =page;
//后台传过来的页数
var curPage = curPage;
//后台传过来的总页数
var datas =$("#totalPage").val();
//每页显示多少条数据
var pageSize =10;
//在网页中一共要分多少页
var totalPage = Math.floor((datas-1)/pageSize+1);
var liStr ="<li><a id='previousPage' href='#'>«</a></li>";
$("#currentPage").val(curPage);
if(page <= totalPage){
if(datas <= 10){
for(i=1; i<=datas; i++){
//为当前页增加样式
var active ="";
if(i==curPage){
active=" class='active' ";
}
liStr +=" <li><a id="+i+" "+active+" href='#'>"+i+"</a></li>"
}
}else{
var start =pageSize*(page-1)+1;
var end =page*pageSize;
if(page == totalPage){
for(i=start; i<=datas; i++){
//为当前页增加样式
var active ="";
if(i==curPage){
active=" class='active' ";
}
liStr +=" <li><a id="+i+" "+active+" href='#'>"+i+"</a></li>"
}
}else{
for(i=start; i<=end; i++){
//为当前页增加样式
var active ="";
if(i==curPage){
active=" class='active' ";
}
liStr +=" <li><a id="+i+" "+active+" href='#'>"+i+"</a></li>"
}
}
}
}
liStr +="<li><a id='nextPage' href='#'>»</a></li>";
$(".pagination").APPend(liStr);
}
})
</script>
</body>
</html>
文章最后发布于: 2018-02-02 17:16:21
相关阅读
如果你有无穷多的水，一个3公升的提捅，一个5公升的提捅，两只提捅形状上下都不均匀，问你如何才能准确称出4公升的水？（40秒-3分钟） 分析：1、
hey five：看脸社交？人们为什么会接受陌生人给自己颜值打
曾经有朋友对我说，不自信的人从来不用“社交软件”社交。当时的我还不明白是什么意思，直到我被另一个朋友安利下载使用了
我们不要在一开始就要求什么都很完善，这是不可能的。所以我的建议是，先开店，再完善。不管三七二十一，先把店开了再说，这会逼着你走下一
现在很多网页上都会有联系QQ客服的功能，其实实现起来有一个很简单的办法，就是把下面的代码复制粘贴到你的html里就可以了（记得改QQ号
在传统服装产业里，10月并不是销售的旺季，但社交电商黑马“全球自选”却交给了服装品牌商一份惊叹的数据：毛衣打底衫上线6