首页  >  文章  >  web前端  >  JQuery+Ajax无刷新分页的实例代码_jquery

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

WBOY
WBOY原创
2016-05-16 17:01:07916浏览

先看效果图:

实现原理很简单,使用了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;
            }
        }
    }

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn