利用AJAX实现无刷新分页技术原理：

其主要是利用AJAX的异步处理机制，实现数据的异步传递，它隐藏了客户端向服务端请求数据的状态，在客户端表现为无刷新的显示状态。

实现分页的步骤：

1.客服端点击页码按钮触发分页事件

2.客户端传递页码参数到服务端

3.服务端连接数据库获取数据

4.服务端将数据序列化并写入输出流

5.客户端获取输出流，并转换为JSOＮ格式数据

６.将JSON数据组合排列到标签元素生成具体页面。

具体实例：

ASPX页面代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="jquery-1.4.1.js"></script>
     <script type="text/javascript">
         var pageCount = 0;
         var pageIndex = 1;
         $(function () {
             //getdata
             $.post("Pager.ashx", { "data": "getdata", "count": "1" }, function (data, status) {
                 var dd = $.parseJSON(data);
                 $(".con li").remove();
                 for (var i = 0; i < dd.length; i++) {
                     var li = $("<li>" + dd[i].datetime + ":" + dd[i].Msg + "</li>");                 
                     $(".con").append(li);
                 }
             });
             //getdatacount
             $.post("Pager.ashx", { "data": "getcount" }, function (data, status) {
                 //alert(data);
                 pageCount = data;
                 $(".b").text(data);
             });
             //尾页
             $(".pp li:eq(0) a").click(function (e) {
                 e.preventDefault();
                 $.post("Pager.ashx", { "data": "getdata", "pagecount": pageCount }, function (data, status) {
                     var dd = $.parseJSON(data);
                     $(".con li").remove();
                     for (var i = 0; i < dd.length; i++) {
                         var li = $("<li>" + dd[i].datetime + ":" + dd[i].Msg + "</li>");
                         $(".con").append(li);
                     }
                 });
             });
             //下页
             $(".pp li:eq(1) a").click(function (e) {
                 e.preventDefault();
                 if (pageIndex < pageCount) {
                     pageIndex++;

$.post("Pager.ashx", { "data": "getdata", "pagecount": pageIndex }, function (data, status) {
                         var dd = $.parseJSON(data);
                         $(".con li").remove();
                         for (var i = 0; i < dd.length; i++) {
                             var li = $("<li>" + dd[i].datetime + ":" + dd[i].Msg + "</li>");
                             $(".con").append(li);
                         }
                     });
                 }
             });
             //上一页
             $(".pp li:eq(2) a").click(function (e) {
                
                 e.preventDefault();
                 if (pageIndex > 1) {
                     pageIndex--;

$.post("Pager.ashx", { "data": "getdata", "pagecount": pageIndex }, function (data, status) {
                         var dd = $.parseJSON(data);
                         $(".con li").remove();
                         for (var i = 0; i < dd.length; i++) {
                             var li = $("<li>" + dd[i].datetime + ":" + dd[i].Msg + "</li>");
                             $(".con").append(li);
                         }
                     });
                 }
             });
             //首页
             $(".pp li:eq(3) a").click(function (e) {
                 e.preventDefault();
                 pageIndex = 1;

$.post("Pager.ashx", { "data": "getdata", "pagecount": pageIndex }, function (data, status) {
                     var dd = $.parseJSON(data);
                     $(".con li").remove();
                     for (var i = 0; i < dd.length; i++) {
                         var li = $("<li>" + dd[i].datetime + ":" + dd[i].Msg + "</li>");
                         $(".con").append(li);
                     }
                 });
             });
         })
     </script>
     <style type="text/css">
     li{ float:right; margin:0 2px 0; list-style:none;}
     .page{float:right; margin-right:1em;}
     .content{ clear:both;}
     .con li{ float:none; list-style:none; background-color:Gray;}
     a{ cursor:pointer;}
         .con
         {
             
             width: 400px;
         }
     </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="content" style=" width:600px; height:400px; border:1px solid red;">
    <ul class="con"></ul>
    </div>
    <div>
    <ul class="pp">
                  <li><a>尾页</a></li>
                  <li><a>下一页</a></li>
                  <li><a>上一页</a></li>
                  <li><a>首页</a></li>
    <li><div class="page">共有数据：<span class="b"></span></div></li>
    </ul>
    </div>
    </form>
</body>
</html>

后台处理程序ashx

<%@ WebHandler Language="C#" class="Pager" %>

using System;
using System.Web;
using System.Collections.Generic;
using System.Web.Script.Serialization;
using System.Data;
using System.Data.SqlClient;
using System.Text;

public class Pager : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string paras = context.Request.Params["data"].ToString();
        //string pagecount = ;
        if (paras == "getcount")
        {
            fenyeSlect ff = new fenyeSlect();
            DataTable dt = ff.selectCount().Tables[0];
            int count = Convert.ToInt32(dt.Rows[0][0].ToString());
            int pageCount = count / 10;
            if (count % 10 != 0)
            {
                pageCount++;
            }
            context.Response.Write(pageCount);
        }
        else if (paras == "getdata")
        {
            string pagenum = context.Request.Params["count"].ToString();

int ipagenum = Convert.ToInt32(pagenum);

fenyeSlect ff = new fenyeSlect();

DataSet ds = ff.GetPageData((ipagenum - 1) * 10 + 1, (ipagenum) * 10);

DataTable dt = ds.Tables[0];

List<News> list = new List<News>();

// string[] list00=new string[dt.Rows.Count];

for (int row = 0; row < dt.Rows.Count; row++)
            {
                //  list00[row] = dt.Rows[row][1].ToString();
                list.Add(new News { datetime = dt.Rows[row][1].ToString(), Msg = dt.Rows[row][2].ToString(), ID = dt.Rows[row][0].ToString() });
            }

JavaScriptSerializer jss = new JavaScriptSerializer();

string data = jss.Serialize(list);

context.Response.Write(data);
        }
      
        //context.Response.Write("Hello World");
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
    public class fenyeSlect
    {
        public SqlConnection getconn()
        {
            string con = "server=.;uid=sa;pwd=nexel;database=wsxfy;";
            SqlConnection conn = new SqlConnection(con);
            return conn;
        }
        /// <summary>
        /// 获得条数，有多少条数据
        /// </summary>
        /// <returns></returns>
        public DataSet selectCount()
        {
            string selectCount = "SELECT COUNT(*) FROM T_Comment";
            DataSet ds = new DataSet();

SqlConnection conn = getconn();
            conn.Open();
            SqlDataAdapter da = new SqlDataAdapter(selectCount, conn);
            da.Fill(ds);
            return ds;

}
        public DataSet GetPageData(int StartRowIndex, int EndRowIndex)
        {
            //   string fenye = "select * from (select ID,Title,Person,[Time],Row_Number() over(order by ID desc) rownum from tb_IndustryNews)t where t.rownum>="+StartRowIndex+" and t.rownum<="+EndRowIndex+"";
            StringBuilder sql = new StringBuilder();
            sql.Append("select * from ( ");
            sql.Append("select ID,PostDate,Msg,Row_Number() over(order by ID desc) Rownum from T_Comment ");
            sql.Append(")t ");
            sql.Append("where t.Rownum>='" + StartRowIndex + "' and t.Rownum<='" + EndRowIndex + "'");

DataSet ds = new DataSet();

SqlConnection conn = getconn();
            conn.Close();
            SqlDataAdapter da = new SqlDataAdapter(sql.ToString(), conn);
            da.Fill(ds);
            return ds;
        }
    }
    public class News
    {
        public string datetime { get; set; }
        public string Msg { get; set; }
        public string ID { get; set; }
    }
}

学习笔记之AJAX无刷新分页的更多相关文章

  1. ajax 无刷新分页

    //ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...

  2. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  3. 关于Ajax无刷新分页技术的一些研究 c#

    关于Ajax无刷新分页技术的一些研究 c# 小弟新手,求大神有更好的解决方案,指教下~ 以前做项目,用过GridView的刷新分页,也用过EasyUI的封装好的分页技术,最近在老项目的基础上加新功能, ...

  4. thinkphp下实现ajax无刷新分页

    1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...

  5. ThinkPhp 3.2 ajax无刷新分页（未完全改完，临时凑合着用）

    临时更改后的page类(很多地方没修改...因为笔者PHP没学好..)如下: <?phpnamespace Fenye\libs; /**  file: page.class.php   完美分 ...

  6. Ajax无刷新分页

    前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage ...

  7. jquery+jquery.pagination+php+ajax 无刷新分页

    <!DOCTYPE html> <html ><head><meta http-equiv="Content-Type" content= ...

  8. SUI分页组件和avalon搞定ajax无刷新分页

    <div ms-controller="main"> <h2 class="pagination-centered">{{ title ...

  9. php+ajax无刷新分页原生ajax实现分页最简单完整实例-完整代码，

    展示页面:index.html <html><script> function ajax_show() { // 获取当前页 var page =1; var xhr = ne ...

随机推荐

  1. Android Service 简介

    Service是Android系统中的一种组件,它跟Activity的级别差不多,但是它不能自己运行,只能后台运行,并且可以和其他组件进行交互.Service是没有界面的长生命周期的代码.Servic ...

  2. 关于windows service不能访问网络共享盘(NetWork Drive)的解决方案

    我映射一个网络驱动器到本机的时候,发现本机的程序直接能访问读取网络驱动器,但是把本机的程序作为本机的windows服务运行的时候就不能访问了. Qt中的QDir::exist(folder)访问失败. ...

  3. SSE及相关技术（web sockets, long polling等）

    server-sent events--One Way Messaging 允许网页获得来自服务器的更新,并且自动更新 Server-Sent Events: allow a web page to ...

  4. 多线程爬虫Java调用wget下载文件，独立线程读取输出缓冲区

    写了个抓取appstore的,要抓取大量的app,本来是用httpclient,但是效果不理想,于是直接调用wget下载,但是由于标准输出.错误输出的原因会导致卡住,另外wget也会莫名的卡住. 所以 ...

  5. ubuntu环境配置

    网络配置 主要文件:/etc/network/interfaces,这里是IP.网关.掩码等的一些配置: # This file describes the network interfaces av ...

  6. ubuntu14.04 安装

    summary: a). the way in the internet just a sugestion, I must to do it  in my own hands, yes ! just ...

  7. SKNode类

    继承自 UIResponder:NSObject 符合 NSCodingNSCopyingNSObject(NSObject) 框架  /System/Library/Frameworks/Sprit ...

  8. js中内建对象

    JavaScript charAt() 函数 string.charAt(n) -- 返回指定位置(n)的字符 char是character的缩写,中文"符号,字符" 引用网址:h ...

  9. UITableViewStyleGrouped顶部留白问题

    我这样创建, ? 1 2 self.tableView = [[UITableView alloc] initWithFrame:                       CGRectMake(0 ...

  10. cocos2d-x 3.6版连连看载入资源

    网上找了一个梦幻连连看的资源.大家能够百度一下.然后整理一下加到project里面去.包含声音和图片文件.后面解释怎样整理能够方便管理. 我不推荐在代码里面直接引用资源文件名称,我称之为硬编码. 做i ...