简单的分页效果
2015-11-25 09:35
267 查看
最近几个项目都用到了分页,简单记录下,方便以后用,代码是参照以前一篇博客修改的,忘记是哪个了。。
1、HTML代码
<table cellpadding="10px" cellspacing="10px" width="100%" id="table1"> <caption>游戏信息</caption> <thead> <th>游戏名称</th> <th>图片</th> <th>详细介绍</th> <th>规则</th> <th>奖品</th> <th>参与人数</th> <th>下载地址</th> <th>是否有线下活动</th> <th>操作</th> </thead> <tbody></tbody> </table> <div id="page1" class="page"></div>
2、相关的css
/* 分页 **/
.page {
margin: 2em;
/* padding-left:400px; */
float:right;
}
.page a {
text-decoration: none;
display: inline-block;
line-height: 14px;
padding: 2px 5px;
color: #333;
border: 1px solid #ccc;
margin: 0 2px;
}
.page a:hover,.page a.on {
background: #999;
color: #fff;
border: 1px solid #333;
}
.page a.unclick,.page a.unclick:hover {
background: none;
border: 1px solid #eee;
color: #999;
cursor: default;
}3、最重要的js代码
//分页,//container 容器,count 总页数,pageNum是一个全局变量,表示当前页码
function setPage(container, count) {
var container = container;
var count = count;
if(count > 0){
//console.log("页数eeee:"+count);
var a = [];
//总页数少于10 全部显示,大于10 显示前3 后3 中间3 其余....
if (pageNum == 1) {
a[a.length] = "<a href=\"javascript:void(0);\" class=\"prev unclick\">上一页</a>";
} else {
a[a.length] = "<a href=\"javascript:void(0);\" class=\"prev\">上一页</a>";
}
function setPageList() {
if (pageNum == i) {
a[a.length] = "<a href=\"javascript:void(0);\" class=\"on\">"
+ i + "</a>";
} else {
a[a.length] = "<a href=\"javascript:void(0);\">" + i
+ "</a>";
}
}
//总页数小于10
if (count <= 10) {
for (var i = 1; i <= count; i++) {
setPageList();
}
}
//总页数大于10页
else {
if (pageNum <= 4) {
for (var i = 1; i <= 5; i++) {
setPageList();
}
a[a.length] = "...<a href=\"javascript:void(0);\">" + count
+ "</a>";
} else if (pageNum >= count - 3) {
a[a.length] = "<a href=\"javascript:void(0);\">1</a>...";
for (var i = count - 4; i <= count; i++) {
setPageList();
}
} else { //当前页在中间部分
a[a.length] = "<a href=\"javascript:void(0);\">1</a>...";
for (var i = pageNum - 2; i <= pageNum + 2; i++) {
setPageList();
}
a[a.length] = "...<a href=\"javascript:void(0);\">" + count
+ "</a>";
}
}
if (pageNum == count) {
a[a.length] = "<a href=\"javascript:void(0);\" class=\"next unclick\">下一页</a>";
} else {
a[a.length] = "<a href=\"javascript:void(0);\" class=\"next\">下一页</a>";
}
container.innerHTML = a.join("");
//事件点击
var pageClick = function() {
var oAlink = container.getElementsByTagName("a");
//var inx = pageNumber; //初始的页码
oAlink[0].onclick = function() { //点击上一页
if (pageNum == 1) {
return false;
}
pageNum--;
getTopics(pageNum); //此方法为ajax调用,从后台取数据
return false;
}
for (var i = 1; i < oAlink.length - 1; i++) { //点击页码
oAlink[i].onclick = function() {
pageNum = parseInt(this.innerHTML);
getTopics(pageNum);
return false;
}
}
oAlink[oAlink.length - 1].onclick = function() { //点击下一页
if (pageNum == count) {
return false;
}
pageNum++;
getTopics(pageNum);
return false;
}
}()
}
}
相关文章推荐
- eclipse 的Ctrl 键失效
- Android Service 与 Activity 通信方法
- PHP汉字转拼音类
- Oracle中文汉字占用字节
- java如何生成二维码图片
- cocos2d-x 帧动画的三种实现
- 面试一谈到这些,就不想面了!
- sql server 清除数据库中所有表的数据
- linux shell 脚本攻略001
- 写一个脚本 通过字符菜单方式添加和删除用户
- PHP汉字转换拼音的类
- php中封装一个缩略图生成类
- 【HDU5568 BestCoder Round 63 (div1)A】【DP java高精度】sequence2 长度恰好为m的LIS数
- 协议森林13 9527 (DNS协议)
- .Net开源工作流Roadflow的使用与集成
- 我对CSS vertical-align的一些理解与认识(一)
- android studio中R文件丢失以及project目录下build文件丢失解决办法
- 【数据库】Ubuntu12.04安装配置Redis3.0
- win7下安装ubuntu
- PHP[封装]——关键字,时间段,其他条件搜素,排序,分页