ASP.NET中利用JavaScript动态生成分页条的实现方案
本文介绍在ASP.NET环境中,通过后端C#代码获取分页参数,并结合JavaScript在前端动态生成分页条的方法。核心逻辑包括利用jQuery创建分页UI,通过URL参数传递当前页码与搜索条件,实现无刷新或简单跳转的分页交互,适用于基础Web应用开发。
后端C#代码初始化分页参数
在Default.aspx.cs文件中,首先定义了分页相关的核心属性。其中pageIndex用于记录当前页码,默认值为1;pageSize设定每页显示的数据条数,默认为10;pageCount表示总页数,此处示例设为100;name变量用于存储搜索关键词,初始为空字符串。在Page_Load事件中,通过Request.QueryString获取URL中的pageIndex参数并转换为整数赋值给pageIndex,同时获取name参数赋值给name变量,完成初始数据的加载。
protected int pageIndex = 1;
protected int pageSize = 10;
protected int pageCount = 100;
protected string name = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
int.TryParse(Request.QueryString["pageIndex"],out pageIndex);
name=Request.QueryString["name"];
}
在Default.aspx.cs文件中,继续处理页面逻辑。这部分代码主要涉及后端对页面状态的管理,确保在页面加载时能正确解析用户传递的分页参数和搜索条件,为前端生成分页条提供必要的数据支持。
前端HTML结构构建
在HTML的Body部分,构建了页面的基本结构。首先包含一个文本输入框,ID为txtName,其value属性绑定后端的name变量,用于显示或输入搜索关键词。接着定义了一个ID为PageBar的div容器,该容器将作为JavaScript动态生成分页条的挂载点,初始状态下为空,等待JS脚本填充内容。
名称:<input type="text" id="txtName" value="<%=name %>" />
<div id="PageBar">
JavaScript动态生成分页条逻辑
在JavaScript部分,首先引入jquery-1.4.1.js库以支持DOM操作。随后定义三个全局变量pagecount、pageindex和pageSize,分别通过服务端渲染的<%=pageCount %>、<%=pageIndex %>和<%=pageSize %>获取后端传递的分页数据。在页面加载完成后,调用createPageBar函数,传入当前页码和总页数,触发分页条的生成逻辑。
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
var pagecount=<%=pageCount %>;
var pageindex=<%=pageIndex %>;
var pageSize=<%=pageSize %>;
$(function(){
createPageBar(pageindex,pagecount);
})
//生成分页条
function createPageBar(pageindex,pageCount){
//拿到存放分页条的div并清空
var pageBarObj=$('#PageBar');
pageBarObj.html('');
//判断给定页码
if(pageindex<1){
pageindex=1;
}
if(pageindex>pageCount){
pageindex=pagecount;
}
//首页与上一页
$('<a href="javaScript:void(0)">首页</a> ').appendTo(pageBarObj).click(function(){
goPage(1);
});
if(pageindex>1){
$('<a href="javaScript:void(0)">上一页</a> ').appendTo(pageBarObj).click(function(){
goPage(pageindex-1);
});
}
//数字分页
var start=pageindex-4;
if(start<1){
start=1;
}
var end=start+9;
if(end>pagecount){
end=pagecount;
}
for(var i=start;i<=end;i++){
$(' <a href="javascript:void(0)">['+i+']</a> ').appendTo(pageBarObj).click(function(){
goPage(i);
});
}
//下一页与尾页
if(pageindex<pagecount){
$('<a href="javaScript:void(0)">下一页</a> ').appendTo(pageBarObj).click(function(){
goPage(pageindex+1);
});
}
$('<a href="javaScript:void(0)">尾页</a>').appendTo(pageBarObj).click(function(){
goPage(pagecount);
});
}
//去跳转
function goPage(pageindex){
var name=$('#txtName').val();
window.location="/Default.aspx?pageindex="+pageindex+"&name="+name;
}
</script>
createPageBar函数负责生成分页条的具体实现。首先获取ID为PageBar的div元素并清空其内容。接着判断页码的有效性,若页码超出范围则进行修正。随后构建分页条的HTML结构,包括首页、上一页、页码数字、下一页和末页按钮。每个按钮绑定相应的事件处理函数,如goPage用于跳转指定页码。goPage函数获取当前搜索关键词,并通过window.location将页面重定向到Default.aspx,同时携带新的pageindex和name参数,实现分页与搜索条件的同步更新。
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28
