js分页(非无刷新)

每当以前看到网上类似的分页感觉很新奇很好看，于是自己也模仿做了一个(其实是项目中要用的，嘿嘿)。。。。

     其实功能做起来确实很简单，主要思想就是根据当前总页数，在js中输出类似<a href='xxx/xxx.aspx?page=current&condition=condition'>current</a>的标签，

以下是css代码段，用于设置分页的样式：

代码

< style type = " text/css " >
#setpage a:link, #setpage a:visited, #setpage a:hover, .current, #info
{
border: 1px solid #DDD;
background: #F2F2F2;
display: inline - block;
margin: 1px;
text - decoration: none;
font - size: 12px;
width: 15px;
height: 15px;
text - align: center;
line - height: 15px;
color: #AAA;
padding: 1px 2px;
}
#setpage a:hover
{
border: 1px solid #E5E5E5;
background: #F9F9F9;
}
.current
{
border: 1px solid #83E7E4;
background: #FFFFDF;
margin: 1px;
color: #27CBC7;
}
#info
{
width: auto;
}
</ style >

 

 

 

JS部分，其主要是用于输出HTML中的A标签，并增加参数。

代码

< script type = " text/javascript " >
var totalpage, pagesize, cpage, count, curcount, outstr, pageurl;
// 初始化
cpage = 1 ;
// 总页数

totalpage = 0 ;
// 显示多少分页
pagesize = 10 ;
// 输出的HTML标签
outstr = "" ; // 页面定位
function gotopage(target) {
cpage = target; // 把页面计数定位到第几页
setpage();
} function setpage() { /// 页面分页的URL设置
totalpage = parseInt(document.getElementById( " <%=hf_Page.ClientID %> " ).value); // 获取肖前页索引
cpage = parseInt(document.getElementById( " <%=hf_Current.ClientID %> " ).value); // 页面跳转URL
pageurl = document.getElementById( " <%=hf_Condition.ClientID %> " ).value; // .replace("page", cpage);
if (totalpage == 0 ) document.getElementById( " setpage " ).style.display = " none " ;
else {
if (totalpage <= 10 ) { // 总页数小于十页
for (count = 1 ; count <= totalpage; count ++ ) {
if (count != cpage) {
outstr = outstr + " <a href='<%=Request.ApplicationPath %>/ " + pageurl.replace( " page " , count) + " ' οnclick='gotopage( " + count + " )'> " + count + " </a> " ;
} else {
outstr = outstr + " <span class='current'> " + count + " </span> " ;
}
}
} if (totalpage > 10 ) { // 总页数大于十页
if (parseInt((cpage - 1 ) / 10 ) == 0 ) {
for (count = 1 ; count <= 10 ; count ++ ) {
if (count != cpage) {
outstr = outstr + " <a href='<%=Request.ApplicationPath%>/ " + pageurl.replace( " page " , count) + " ' οnclick='gotopage( " + count + " )'> " + count + " </a> " ;
} else {
outstr = outstr + " <span class='current'> " + count + " </span> " ;
}
}
outstr = outstr + " <a href='<%=Request.ApplicationPath%>/ " + pageurl.replace( " page " , count) + " 'style='width:50px;' οnclick='gotopage( " + count + " )'> 下一页 </a> " ;
} else if (parseInt((cpage - 1 ) / 10 ) == parseInt(totalpage / 10 )) {
outstr = outstr + " <a href='<%=Request.ApplicationPath%>/ " + pageurl.replace( " page " , (parseInt((cpage - 1 ) / 10 ) * 10 )) + " ' οnclick='gotopage( " + (parseInt((cpage - 1 ) / 10 ) * 10 ) + " )'>previous</a> " ;
for (count = parseInt(totalpage / 10 ) * 10 + 1 ; count <= totalpage; count ++ ) {
if (count != cpage) { outstr = outstr + " <a href='<%=Request.ApplicationPath%>/ " + pageurl.replace( " page " , count) + " ' οnclick='gotopage( " + count + " )'> " + count + " </a> " ; } else {
outstr = outstr + " <span class='current'> " + count + " </span> " ;
}
}
} else {
outstr = outstr + " <a href='<%=Request.ApplicationPath%>/ " + pageurl.replace( " page " , (parseInt(cpage / 10 , 0 )) * 10 ) + " ' οnclick='gotopage( " + (parseInt((cpage - 1 ) / 10 ) * 10 ) + " )'>previous</a> " ;
for (count = parseInt((cpage - 1 ) / 10 ) * 10 + 1 ; count <= parseInt((cpage - 1 ) / 10 ) * 10 + 10 ; count ++ ) {
if (count != cpage) {
outstr = outstr + " <a href='<%=Request.ApplicationPath%>/ " + pageurl.replace( " page " , count) + " ' οnclick='gotopage( " + count + " )'> " + count + " </a> " ;
} else {
outstr = outstr + " <span class='current'> " + count + " </span> " ;
}
}
outstr = outstr + " <a href='<%=Request.ApplicationPath%>/ " + pageurl.replace( " page " , count) + " ' style='width:50px;' οnclick='gotopage( " + count + " )'> 下一页 </a> " ;
}
}
document.getElementById( " setpage " ).innerHTML = " <div id='setpage'><span id='info'>共 " + totalpage + " 页|第 " + cpage + " 页<\/span> " + outstr + " <\/div> " ; outstr = "" ;
}
} setpage(); // 调用分页
</ script >

 

页面HTML部分：

 

代码

< asp:HiddenField ID = " hf_Page " runat = " server " Value = " 0 " />
< asp:HiddenField ID = " hf_Condition " runat = " server " Value = "" />
< asp:HiddenField ID = " hf_Current " runat = " server " Value = " 1 " />
< div id = " setpage " style = " margin-top: 20px; " >
这里用来放置分页的页码序呈 </ div >

 

 

 

后台代码部分：

 

代码

// 查询条件
private string condition
{
get
{
if (ViewState[ " Condi " ] == null )
return "" ;
else return ViewState[ " Condi " ].ToString();
}
}

protected void Page_Load( object sender, EventArgs e)
{
if ( ! IsPostBack)
{
int current = 0 ; if (Request.QueryString[ " page " ] != null ) current = Convert.ToInt32(Request.QueryString[ " page " ]); else current = 1 ;
LoadContents(current);
}
}
private void LoadContents( int current)
{
this .hf_Condition.Value = string .Format( " FindFood.aspx?p=page&type={0} " , " 360102 " );
ViewState[ " Condi " ] = " AND areaId='360102' " ;
// 获得展示信息列表，拼接成HTML输出到前台的div中

string content = RestaurantManager.Instance().RestaurantList(current, " view_TaxisRestaurantListByTime " , condition);
// 获得总共的数据行数
int counter = RestaurantManager.Instance().RestaurantCount( " areaId='360102' " );
ViewState[ " Counter " ] = counter; // 根据每页显示的数据条数进行计算一共需要多少页
if (counter / 20 == 0 )
this .hf_Page.Value = (counter / 20 ).ToString();
else
this .hf_Page.Value = (counter / 20 + 1 ).ToString(); // 标识当前页索引
this .hf_Current.Value = current.ToString();
if ( string .IsNullOrEmpty(content))
this .contents.InnerHtml = " <font size=\ " 12px;\ " ><b>没有要显示的数据</b></font> " ;
else this .contents.InnerHtml = content;
}

 

 

 

 

转载于:https://www.cnblogs.com/netDream/archive/2010/11/12/js_pager.html