首先声明,此分页及其偷懒,而且只适用于页数较少,且数据固定的表格,当然,你硬是要用在变化的数据表格中也没问题,前提是你需要自己修改代码哦!!!
实际场景,大家都知道分页的总页数一般是后台传出来的,但是本人碰到了不能大量更改后台代码的情况,但数据又过多,大概50多条,需要分页,所以,本人思索之下,得出一个结论,那就是做个死的假分页,不多说,先展示一下效果。
···········································································································································································································································
虽然代码很偷懒,但看还是蛮好看的嘛!!!!!!!!!!
···········································································································································································································································
不多说上代码!!!
css代码:
总体是借鉴的,但一些渐变的效果可以自己修改哦,比如点上去显示的样式啊,字体啊什么的,你要什么就改什么。
/*分页*/
.dede_pages{ text-align:center;}
.dede_pages ul{float:left;padding:12px 0px 12px 16px;}
.dede_pages ul li{float:left;font-family:Tahoma;line-height:17px;margin-right:6px;border:1px solid #E9E9E9;}
.dede_pages ul li a{float:left;padding:2px 4px 2px;color:#555;display:block;}
.dede_pages ul li a:hover{background-color:#96cfff;padding:2px 4px 2px;}
.dede_pages .pageinfo{line-height:21px;padding:12px 10px 12px 16px;color:#999;}
.dede_pages .pageinfo strong{color:#555;font-weight:normal;margin:0px 2px;}
html代码:
不好意思,开始偷懒············
<div class="dede_pages">
<ul class="pagelist">
<li >页码</li>
<li><a href="javascript:void(0)" οnclick="change1()">1</a></li>
<li><a href="javascript:void(0)" οnclick="change2()">2</a></li>
<li><a href="javascript:void(0)" οnclick="change3()">3</a></li>
<li><a href="javascript:void(0)" οnclick="change4()">4</a></li>
<li><a href="javascript:void(0)" οnclick="change5()">5</a></li>
<li><a href="javascript:void(0)" οnclick="change6()">6</a></li>
<li><span class="pageinfo">共 <strong>6</strong>页<strong>55</strong>条</span></li>
</ul>
</div>
看到这种麻瓜代码,觉得自己就是个瓜皮,但是谁叫它容易呢。
js代码:
function change1(){
var pageNum=1;
table1(pageNum);
}
function change2(){
var pageNum=2;
table1(pageNum);
}
function change3(){
var pageNum=3;
table1(pageNum);
}
function change4(){
var pageNum=4;
table1(pageNum);
}
function change5(){
var pageNum=5;
table1(pageNum);
}
function change6(){
var pageNum=6;
table1(pageNum);
}
function table1(pageNum){
var changeNum=pageNum;
$.ajax({
url : "xxxx.action",
type : "post",
dataType : "json",
data:{"changeNum":changeNum},
success : function(data) {
}
});
}
哈哈,简单粗暴,还提升代码量,简直666666666,只会往后台传入你想要看的页码,后台根据页码来返回你想看的数据。
是不是及其偷懒,程序员的人生不就是一步一步发现最偷懒的方法吗?(别人是优化代码,提高复用性),我貌似是以最笨的,最繁琐,最不复用的方法来写,但是谁叫它有用呢。