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

先看效果图:
JQuery+Ajax无刷新分页的实例代码_第1张图片

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

二、前台页面代码:

复制代码 代码如下:


    JQuery无刷新分页
   
   
   
   
   


复制代码 代码如下:


   

       
           
               
               
               
               
           
       

                    ID
               

                    标题
               

                    更新时间
               

                    点击量
               

       
   

   


三、页面后台文件

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

复制代码 代码如下:

public string pageCount = string.Empty;//总条目数

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                pageCount = new News().GetNewsCount();
            }
        }


四、最主要的是ajax处理程序:PagerHandler.ashx
复制代码 代码如下:

 public class PagerHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string str = string.Empty;
            int pageIndex = Convert.ToInt32(context.Request["pageIndex"]);
            int size = Convert.ToInt32(context.Request["pageSize"]);
            if (pageIndex == 0)
            {
                pageIndex = 1;
            }
            int count = 0;

            News n = new News();
            List list = n.GetNewsList(pageIndex, size, ref count);
            StringBuilder sb = new StringBuilder();
            foreach (News p in list)
            {
                sb.Append("");
                sb.Append(p.News_id);
                sb.Append("");
                sb.Append(""+p.News_title+"");
                sb.Append("");
                sb.Append(p.News_time);
                sb.Append("");
                sb.Append(p.News_readtimes);
                sb.Append("");
            }
            str = sb.ToString();
            context.Response.Write(str);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

你可能感兴趣的:(JQuery+Ajax无刷新分页的实例代码)