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) + "' onclick='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) + "' onclick='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;' onclick='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)) + "' onclick='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) + "' onclick='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) + "' onclick='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) + "' onclick='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;' onclick='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;
}
