提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JQuery+Ajax无刷新分页的实例代码

jQuery实例AJAX代码 分页 刷新
2023-06-13 09:15:17 时间
先看效果图：

实现原理很简单，使用了jquery.pagination这个插件，每当点击页码时异步去服务器去取该页的数据，简单介绍如下：
一、数据库表结构：很简单 就四个字段分别是News_id News_title News_time News_readtimes

二、前台页面代码：

复制代码代码如下:

<headrunat="server">
   <title>JQuery无刷新分页</title>
   <linkhref="Styles/common.css"rel="stylesheet"type="text/css"/>
   <linkhref="Styles/paging.css"rel="stylesheet"type="text/css"/>
   <scriptsrc="Scripts/jquery-1.4.1.js"type="text/javascript"></script>
   <scriptsrc="Scripts/jquery.pagination.js"type="text/javascript"></script>
   <scripttype="text/javascript">   
   varpageIndex=0;
   varpageSize=3;

   $(function(){      
       InitTable(0);             

       $("#Pagination").pagination(<%=pageCount%>,{
           callback:PageCallback,
           prev_text:"上一页",
           next_text:"下一页",
           items_per_page:pageSize,
           num_display_entries:6,//连续分页主体部分分页条目数
           current_page:pageIndex,//当前页索引
           num_edge_entries:2//两侧首尾分页条目数
       });

       //翻页调用
       functionPageCallback(index,jq){          
           InitTable(index);
       }

       //请求数据
       functionInitTable(pageIndex){                               
           $.ajax({
               type:"POST",
               dataType:"text",
               url:"Ajax/PagerHandler.ashx",
               data:"pageIndex="+(pageIndex+1)+"&pageSize="+pageSize,
               success:function(data){                                
                   $("#Resulttr:gt(0)").remove();//移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）
                   $("#Result").append(data);//将返回的数据追加到表格
               }
           });           
       }
   });
   </script>
</head>


复制代码代码如下:

<formid="form1"runat="server">
   <center>
       <tableid="Result"border="1"cellpadding="5"style="border-collapse:collapse;margin:20px;
           border:solid1px#85A8BE;width:60%">
           <tr>
               <thstyle="width:10%">
                   ID
               </th>
               <thstyle="width:60%">
                   标题
               </th>
               <thstyle="width:20%">
                   更新时间
               </th>
               <thstyle="width:10%">
                   点击量
               </th>
           </tr>
       </table>
       <divid="Pagination"class="paging">
       </div>
   </center>
   </form>

三、页面后台文件

这里主要是获取记录总数：

复制代码代码如下:
publicstringpageCount=string.Empty;//总条目数

       protectedvoidPage_Load(objectsender,EventArgse)
       {
           if(!IsPostBack)
           {
               pageCount=newNews().GetNewsCount();
           }
       }


四、最主要的是ajax处理程序：PagerHandler.ashx
复制代码代码如下:
 publicclassPagerHandler:IHttpHandler
   {
       publicvoidProcessRequest(HttpContextcontext)
       {
           context.Response.ContentType="text/plain";
           stringstr=string.Empty;
           intpageIndex=Convert.ToInt32(context.Request["pageIndex"]);
           intsize=Convert.ToInt32(context.Request["pageSize"]);
           if(pageIndex==0)
           {
               pageIndex=1;
           }
           intcount=0;

           Newsn=newNews();
           List<News>list=n.GetNewsList(pageIndex,size,refcount);
           StringBuildersb=newStringBuilder();
           foreach(Newspinlist)
           {
               sb.Append("<tr><td>");
               sb.Append(p.News_id);
               sb.Append("</td><td>");
               sb.Append("<ahref="#">"+p.News_title+"</a>");
               sb.Append("</td><td>");
               sb.Append(p.News_time);
               sb.Append("</td><td>");
               sb.Append(p.News_readtimes);
               sb.Append("</td></tr>");
           }
           str=sb.ToString();
           context.Response.Write(str);
       }

       publicboolIsReusable
       {
           get
           {
               returnfalse;
           }
       }
   }

相关文章