超简单的js分页。
1.Coomand.Css
/*高级表格控制*/
*{ padding:0px; margin:0px;}
a{ color:#FFF; text-decoration:none;}
.righr{ float:right;}
body{ background-color:#666;}
/*分页*/
.pagination {list-style: none;display: inline-block;padding: 0;margin-top: 10px;-moz-user-select: none; -khtml-user-select: none; user-select: none;}
.pagination li {display: inline;text-align: center;}
.pagination a {float: left;display: block;font-size: 14px;text-decoration: none;padding: 5px 12px;color: #fff;margin-left: -1px;border: 1px solid transparent;line-height: 1.5;
/*解决双击文字被选中的问题*/
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
}
.pagination a .ck{ background-color:#F00;}
.pagination .next:hover{ background-color:#F00; color:#FFF;}
.pagination span{float: left;display: block;font-size: 14px; line-height:22px; margin-left:20px;}
.pagination a.active {cursor: default;}
.pagination a:active {outline: none;}
/*分页套餐效果2*/
.modal-2 li:first-child a {-moz-border-radius: 50px 0 0 50px;-webkit-border-radius: 50px;border-radius: 50px 0 0 50px;}
.modal-2 li:last-child a {-moz-border-radius: 0 50px 50px 0;-webkit-border-radius: 0;border-radius: 0 50px 50px 0;}
.modal-2 a {border-color: #ddd;color: #999;background: #fff;}
.modal-2 a:hover {color: #E34E48;background-color: #eee;}
.modal-2 a.active, .modal-2 a:active {border-color: #E34E48;background: #E34E48;color: #fff;}
/*分页套餐效果3*/
.modal-3 a {margin-left:3px;padding: 0; padding: 0px 6px; -moz-border-radius:30%;-webkit-border-radius:30%;border-radius: 30%;}
.modal-3 a:hover {background-color:#FF0; color:#F30; cursor:pointer;}
.modal-3 a.active, .modal-3 a:active {/*background-color: #F60;*/background-color:#FFF; color:#333;}
2.Command.JS 公共部分增加方法
//分页，需要传递两个值（总行数，页码）
function paging(totalRows, page, state)//总行数，页码
{
if (totalRows <= 0) { return; }//总页数小于等于0的时候停止
var showRow =10//每页显示的数据行数
var row = 10//每页显示的页码数
var centre=row%2; //5
var total = Math.ceil(totalRows / showRow);//可分的页数
var pageCk = page;//当前页数
if (page < 1) { paging(totalRows, 1); return; }// alert("已到首页");return;
if (page > total) { return; }//alert("已到尾页");
if (total < row) { row = total; }
var pagingTxt = "";//拼接
pagingTxt += "<li><a class='next' onclick='paging(" + totalRows + ",1,1)'>首页</a></li>"
pagingTxt += "<li><a class='next' onclick='paging(" + (totalRows + "," + (page - row)) + ",1)'>«</a></li>";
var PagingLeng = page + row;//循环次数
if (page > Math.ceil(page / row)) { PagingLeng = Math.ceil(page / row) * row + 1; page = PagingLeng - row; }//算出起始页
if (page + row > total) { if (page > row) { PagingLeng = total + 1; } }//大于每页显示的页码数的在+1;
for (var i = page; i < PagingLeng; i++) {
if (i == pageCk && state!=1) {
pagingTxt += "<li><a class='active' value=" + i + " id='page' onclick='page(" + i + ")'>" + i + "</a></li>";
}
else {
pagingTxt += "<li><a class='' value=" + i + " id='page' onclick='page(" + i + ")'>" + i + "</a></li>";
}
}
if(page>centre){alert("大"); }
pagingTxt += "<li><a class='next' onclick='paging(" + (totalRows + "," + (page + row)) + ",1)'>»</a></li>";
pagingTxt += "<li><a class='next' onclick='paging(" + totalRows + "," + total + ",1)'>尾页</a></li>"
pagingTxt += "<li><span>第：" + Math.ceil(page / row) + "页 |共：" + Math.ceil(total / row) + "页 </span></li>";//parseInt((totalRows/row)/row+1)
window.document.getElementById("paging").innerHTML = pagingTxt;
}
3.单个页面 js 增加方法
//分页-获取当前页数
function page(i) {
alert(i);
}
window.onload =function(i)
{
paging(301,7);//定义分页
}
4.html 增加
<ul class="pagination modal-2" id="paging"></ul>
---------------------------------------------------------
代码为本人原创，不足之处还望指出。
如果对大家有帮助，还望留言支持。
