常用分页效果
案例网站:
http://www.juanparts.com/Products.html
效果如图:
模板文件:/skin/.../paging.html
<div class="paging">
/
Total
【<a href="">First</a>】
【<a href="">Prev</a>】
<span id="pagingnumber"></span>
【<a href="">Next</a>】
【<a href="">Last</a>】
<input id="txtGoPage" type="text" style="width:30px" />
<input id="btnGoPage" type="button" style="width:30px" value="Go" onclick="GoPage('','','')" />
</div>
<script type="text/javascript" src="/Js/paging.js"></script>
<script type="text/javascript">I85Paging('', '', '');</script>
本地js:/Js/paging.js
//分页处理,产生1 2 3 ...之类的样式效果
function GoPage(totalpages, currentpage, firstpagehref) {
//var totalpages = ;
//var currentpage = ;
var txtGoPage = document.getElementById("txtGoPage");
var pagenumber = txtGoPage.value;
if (pagenumber != undefined) {
if (pagenumber != 0 && pagenumber != currentpage && pagenumber <= totalpages) {
//var firstpagehref = "";
var pagingprofix = firstpagehref.substr(0, firstpagehref.indexOf(".html"));
if (pagenumber == 1)
location.href = pagingprofix + ".html";
else
location.href = pagingprofix + pagenumber + ".html";
}
}
}
function I85Paging(totalpages,currentpage,firstpagehref)
{
//var totalpages = ;
if(totalpages>1)
{
//var currentpage = ;
//var firstpagehref = "";
var pagingnumber = document.getElementById("pagingnumber");
var pagingcontent = "";
var pagingprofix = firstpagehref.substr(0,firstpagehref.indexOf(".html"));
var ii = 1;
var jj = 0;
if (currentpage / 10 > 1) {
ii = (Math.floor(currentpage / 10) * 10 + 1); //取整得到后10页的开始页
pagingcontent = "...";
}
for (var i = ii; i <= totalpages; i++) {
if (i == 1)
jj = '';
else
jj = i;
if (i == currentpage)
pagingcontent += "<a href='" + pagingprofix + jj + ".html'><b>" + i + "</b></a> ";
else
pagingcontent += "<a href='" + pagingprofix + jj + ".html'>" + i + "</a> ";
if (i > (ii + 8)) {
pagingcontent += "...";
break;
}
}
pagingnumber.innerHTML = pagingcontent;
}
}
http://www.juanparts.com/Products.html
效果如图:
模板文件:/skin/.../paging.html
<div class="paging">
/
Total
【<a href="">First</a>】
【<a href="">Prev</a>】
<span id="pagingnumber"></span>
【<a href="">Next</a>】
【<a href="">Last</a>】
<input id="txtGoPage" type="text" style="width:30px" />
<input id="btnGoPage" type="button" style="width:30px" value="Go" onclick="GoPage('','','')" />
</div>
<script type="text/javascript" src="/Js/paging.js"></script>
<script type="text/javascript">I85Paging('', '', '');</script>
本地js:/Js/paging.js
//分页处理,产生1 2 3 ...之类的样式效果
function GoPage(totalpages, currentpage, firstpagehref) {
//var totalpages = ;
//var currentpage = ;
var txtGoPage = document.getElementById("txtGoPage");
var pagenumber = txtGoPage.value;
if (pagenumber != undefined) {
if (pagenumber != 0 && pagenumber != currentpage && pagenumber <= totalpages) {
//var firstpagehref = "";
var pagingprofix = firstpagehref.substr(0, firstpagehref.indexOf(".html"));
if (pagenumber == 1)
location.href = pagingprofix + ".html";
else
location.href = pagingprofix + pagenumber + ".html";
}
}
}
function I85Paging(totalpages,currentpage,firstpagehref)
{
//var totalpages = ;
if(totalpages>1)
{
//var currentpage = ;
//var firstpagehref = "";
var pagingnumber = document.getElementById("pagingnumber");
var pagingcontent = "";
var pagingprofix = firstpagehref.substr(0,firstpagehref.indexOf(".html"));
var ii = 1;
var jj = 0;
if (currentpage / 10 > 1) {
ii = (Math.floor(currentpage / 10) * 10 + 1); //取整得到后10页的开始页
pagingcontent = "...";
}
for (var i = ii; i <= totalpages; i++) {
if (i == 1)
jj = '';
else
jj = i;
if (i == currentpage)
pagingcontent += "<a href='" + pagingprofix + jj + ".html'><b>" + i + "</b></a> ";
else
pagingcontent += "<a href='" + pagingprofix + jj + ".html'>" + i + "</a> ";
if (i > (ii + 8)) {
pagingcontent += "...";
break;
}
}
pagingnumber.innerHTML = pagingcontent;
}
}