/Files/guozili/SiteOSFile2.rar模仿视频网站首页ajax分页，结合neverModules-slider +jquery form插件实现拖动滑动块进行AJAX分页，此方法较灵活，另外可用2.0里面的CallBack机制实现同样的功能，预览和代码请见下：
(注释添加中.......)
预览：
<iframe width="500" height="500" style="width: 561px; height: 369px;" src="http://www.5533110.com/123/"></iframe>
代码：
default.aspx
<%
@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default9.aspx.cs"Inherits="Default9"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<styletype="text/css"media="all"title="Default">
.imageSlider1{}{margin:0;padding:0;height:18px;width:400px;background-image:url("images/scrollbg.gif");}
.imageBar1{}{margin:0;padding:0;height:17px;width:10px;background-image:url("images/scrfloat.gif");}
body{}{background-color:#f5f5f5;}
div{}{color:#000;font-size:12px;}
</style>
<scripttype="text/javascript"src="slider_extras.js"charset="gb2312"></script>
<scripttype="text/javascript"src="jquery-latest.js"></script>
<scripttype="text/javascript"src="form.js"></script>
</head>
<body>
<formid="form1"action="default10.aspx"method="post">
<inputid="pageindex"name="pageindex"type="hidden"value="1"/>
<divid="content">
</div>
<divstyle="height:100px;margin:10px;width:600px">
<divstyle="float:left;">
<imgsrc="images/pre.gif"onclick="sliderImage1.setValue(sliderImage1.getValue()-1)"/></div>
<divid="sliderDemo1"style="height:40px;width:400px;float:left;">
</div>
<divstyle="float:left;">
<imgsrc="images/next.gif"onclick="sliderImage1.setValue(sliderImage1.getValue()+1)"/></div>
</div>
<scripttype="text/javascript">
//<
});
sliderImage1.onstart=function(){
};
sliderImage1.onchange=function(){
};
//滑动操作完成时1.该pageindex隐藏域的值，2.jquery进行提交数据
sliderImage1.onfinish=function(){
$("#pageindex").val(sliderImage1.getValue());
onSubmitPage();
};
sliderImage1.create();
sliderImage1.setValue(sliderImage1.min);
//jueryform插件postpageindex隐藏域的值,default10.aspx根据post过来的页值返回repeater生产的html
functiononSubmitPage()
{
varoptions={
target:'#content',//id=contentdiv用来加载返回的数据
success:functionSubmitSuccess(data){
$('#content').fadeIn('slow');//加载成功后content显示出来
}
};
$('#content').html('loading.');
$('#form1').ajaxSubmit(options);//ajax提交
}
//]]>
</script>
</form>
</body>
</html>
default10.aspx
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default10.aspx.cs"Inherits="Default10"%>
<asp:repeaterid="Repeater1"runat="server">
<ItemTemplate>
<%#Eval("name")%>
<br/>
</ItemTemplate>
</asp:repeater>
default10.aspx.cs
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingSystem.Collections.Generic;
usingSystem.IO;
usingSystem.Globalization;
publicpartialclassDefault10:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{
getRepeaterHtml(Convert.ToInt32(Request.Form["pageindex"]));
}
privatevoidgetRepeaterHtml(intpage)
{
this.Repeater1.DataSource=getNameByPage(page);
this.Repeater1.DataBind();
}
privateIList<note>getNameByPage(intpage)
{
IList<note>notes=newList<note>();
for(inti=10*(page-1)+1;i<=10*page;i++)
{
notenote1=newnote();
note1.Name="第"+i.ToString()+"条记录";
notes.Add(note1);
}
returnnotes;
}
publicclassnote
{
string_name;
publicstringName
{
get{returnthis._name;}
set{this._name=value;}
}
}
}
net2.0 callback实现：
default8.aspx
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default8.aspx.cs"Inherits="Default8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<styletype="text/css"media="all"title="Default">
.imageSlider1{}{margin:0;padding:0;height:18px;width:400px;background-image:url("images/scrollbg.gif");}
.imageBar1{}{margin:0;padding:0;height:17px;width:10px;background-image:url("images/scrfloat.gif");}
body{}{background-color:#f5f5f5;}
div{}{color:#000;font-size:12px;}
</style>
<scripttype="text/javascript"src="slider_extras.js"charset="gb2312"></script>
</head>
<body>
<formid="form1"runat="server">
<divid="content">
<asp:RepeaterID="Repeater1"runat="server">
<ItemTemplate>
<%#Eval("name")%>
<br/>
</ItemTemplate>
</asp:Repeater>
</div>
<divstyle="height:100px;margin:10px;width:600px">
<divstyle="float:left;">
<imgsrc="images/pre.gif"onclick="sliderImage1.setValue(sliderImage1.getValue()-1)"/></div>
<divid="sliderDemo1"style="height:40px;width:400px;float:left;">
</div>
<divstyle="float:left;">
<imgsrc="images/next.gif"onclick="sliderImage1.setValue(sliderImage1.getValue()+1)"/></div>
</div>
<scripttype="text/javascript">
//<![CDATA[
varsliderImage1=newneverModules.modules.slider({targetId:"sliderDemo1",
sliderCss:"imageSlider1",
barCss:"imageBar1",
min:1,
max:10,
hints:"movetheslider"
});
sliderImage1.onstart=function(){
};
sliderImage1.onchange=function(){
};
sliderImage1.onfinish=function(){
CallServer(sliderImage1.getValue(),content);
};
sliderImage1.create();
sliderImage1.setValue(sliderImage1.min);
functionCallServer(arg,context)
{
<%=ClientScript.GetCallbackEventReference(this,"arg","ReceiveServerData","context")%>;
context.innerHTML="loading";
}
functionReceiveServerData(result,context)
{
context.innerHTML=result;
}
//]]>
</script>
</form>
</body>
</html>
default8.aspx.cs
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingSystem.Collections.Generic;
usingSystem.IO;
usingSystem.Globalization;
publicpartialclassDefault8:System.Web.UI.Page,ICallbackEventHandler
{
privateintpage;
protectedvoidPage_Load(objectsender,EventArgse)
{
if(!IsPostBack)
{
this.Repeater1.DataSource=getNameByPage(1);
this.Repeater1.DataBind();
}
}
privateIList<note>getNameByPage(intpage)
{
IList<note>notes=newList<note>();
for(inti=10*(page-1)+1;i<=10*page;i++)
{
notenote1=newnote();
note1.Name="第"+i.ToString()+"条记录";
notes.Add(note1);
}
returnnotes;
}
publicclassnote
{
string_name;
publicstringName
{
get{returnthis._name;}
set{this._name=value;}
}
}
privatestringgetRepeaterHtml(intpage)
{
this.Repeater1.DataSource=getNameByPage(page);
this.Repeater1.DataBind();
StringWriterwriter1=newStringWriter(CultureInfo.InvariantCulture);
HtmlTextWriterwriter2=newHtmlTextWriter(writer1);
this.Repeater1.RenderControl(writer2);
writer2.Flush();
writer2.Close();
returnwriter1.ToString();
}
#regionICallbackEventHandler成员
publicstringGetCallbackResult()
{
returngetRepeaterHtml(this.page);
}
publicvoidRaiseCallbackEvent(stringeventArgument)
{
this.page=Convert.ToInt32(eventArgument);
}
#endregion
}
/Files/guozili/tytgw.rar
分享到：
相关推荐
jPage for jQuery ajax 分页 后端使用jPage jquery-ajax表格动态分页.
jquery无刷新分页、排序 利用jquery实现的ajax无刷新分页以及排序，支持多种格式无刷新更换，数据库采用的是Sql2000自带的NorthWind数据库 数据库控制使用的是SqlHelper
jQueryPager(JQuery分页插件pagination实现Ajax分页) CSDN犀利助互群60168829
Jquery.Pagination.js + Jquery.Ajax + ASP.NET----无刷新分页Pagination 1.5.1,是在原作者基础上修改的，因为Pagination 1.5.1与它的低版本有很大的区别，所以在此实例中增加了新版的使用方法
其中包含6款Ajax分页Demo，文字分页、图片分页都可以。具有一定特效、很炫。基本已经满足各种web分页开发了。
基于 jQuery 实现的 Ajax 异步分页的技术,网上看到就下载保存下来，感觉很不错
JqueryAjax 无刷新分页 带数据库 直接可运行 pageTest.asp js封装 简化代码
基于Jquery+Ajax+Json实现分页显示附效果图
本例是使用ajax+jquery动态后台分页，使用jquery.pageFoot.js插件，附源代码及其插件
jquery ajax分页插件 jquery ajax分页插件 jquery ajax分页插件
Jquery ajax 读取txt文件 Jquery分页 Jquery ajax 读取txt文件 Jquery分页
Ajax无刷新分页Jquery 可以设置自己的分页样式，利用ashx接受事件请求，值得一学
jQuery paginate分页导航插件ajax分页代码 jQuery paginate分页导航插件ajax分页代码 jQuery paginate分页导航插件ajax分页代码
利用jquery实现的ajax无刷新分页以及排序，支持多种格式无刷新更换。
jQuery+ajax实现一款简单实用的异步加载分页代码，支持自定义设置分页列表数量。
一个关于Jquery+ajax+jsp分页 因为ajax回调函数支持返回的类型有json,html,xml，里面三种都有，受益良多，与大家分享
基于jquery扩展的前端分页插件，只需要将注重点放在后面json数据上，前端只需要遍历表格数据就可完成整个前端的分页操作。 PS:如遇BUG请自行修改 使用请引入css和js $("div").easyPage(url,param,function(data){ $...
Ajax分页 C# +jquery +jsonAjax分页 C# +jquery +json
jQuery+Ajax+PHP无刷新分页
使用myeclipse开发的jQuery加上struts的ajax无刷新分页，一个完整的demo，经测试，可运行。里面的数据是通过自己的拼凑的JSON数据来实现的分页。