程序博客网 > 微信商城淘宝客

ajax+asp.net+sqlserver多方式分页

来源：互联网 发布：微信商城淘宝客 编辑：程序博客网 时间：2024/05/09 23:57

分页,WEB程序中最常见的应用。现在很多网站也采了AJAX分页的方法。真的会提高分页速度嘛？我看，不一定，但给用户更好的视觉感，这是肯定的。。本想找在网上找个源码好好学习一下，这样也可以少走一些弯路。无耐找了一上午也没有找合意的。。。大部分是使用了第三方控件。 要么就是一些讲原理的．．唉．．还自己动手吧．．自己动手，丰衣足食．呵呵．．．从找到的资料中总结了一下，AJAX分页大概有三种实现方式有(1)直接绑定Gridview，(2)输出xml，(3)输出JSON，首先我也采用GridView绑定，直接输出，这样做客户端ＪＳ代码也不要做太多事情，获取输出取直接加载到DIV标签中就是呢。这样做简单是简单，但在练习中遇到一个问题那就是总页码怎么传递过去，再者返回的东西太多，不如返回XML,JSON简洁。这样是否会影响传输速度呢？我也凝惑，还需要高人指点。XML与JSON两种格式，我采用了JSON。JSON比XML更简洁，传输速度更快。对于这样不复杂的数据JSON完全够用呢。

JSON:简单地说，JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。这个字符串看起来有点儿古怪（稍后会看到几个示例），但是 JavaScript 很容易解释它，而且 JSON 可以表示比名称/值对更复杂的结构。例如，可以表示数组和复杂的对象，而不仅仅是键和值的简单列表。
JSON参考文章：http://www.ibm.com/developerworks/cn/web/wa-ajaxintro10/

效果图

 1、创建显示页面PageShowAjax.aspx
  主要函数：
  createXMLHttpRequest()
  创建XMLHttpRequest对象

  GotoPage(actiontmp)
  actiontmp分页动作
  GotoPage()获取页码，异步调用CreatePageAjax。CreatePageAjax根据页码，查询数据表，返回JSON格式字符串。

  function CreateTable()
  CreateData()获取CreatePageAjax 返回的数据，CreateTable解析返回的JSON字符串，生成表格

  function CreateData()
  获取CreatePageAjax返回的JSON字符串，调用CreateTable() 生成表格 。并加载到DIV标签中。

详细代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <style type="text/css">
         body { line-height:20px; font-size:12px; background:#ffffff;color:#069;}
         a:link{padding 2px 0px 0px 2px;line-height:18px;color:#069;text-decoration:none;}
         a:visited{padding 2px 0px 0px 2px;line-height:18px;color:#069;text-decoration:none;bgckground:#CCC}
         a:hover{padding 2px 0px 0px 2px;line-height:18px;color:#069;text-decoration:none;background:#FFFF99;}
         table{
          border:1px   solid   #000000;
          background:#f8f8ff;
           hrong:expression(this.cellSpacing=1); 
          
         }
       
         
         .tr_head{
         background:#ffffe0;

         }
         .tr_one{
         background:#fffafa;
         }
         .tr_two{
         background:#f8f8ff;
         }
          tr{
           background:#ffffff;
           bencalie:expression(this.onmouseover=function(){this.style.background='#FFFF99';this.style.cursor='pointer'});
           bencalie1:expression(this.onmouseout=function(){this.style.background='#ffffff'})
           }   
          
    </style>
<script type="text/javascript" src="JS/json.js"></script>
<script language=javascript type="text/javascript">
// <!CDATA[
var PageCurrenNO;
var PageCount;
var actiontmp;
var ShowID;
var xmlHttp;
var ShowTalbe;
var Rowset;
var MaxPageNO;
var n;

//创建对象
function createXMLHttpRequest()
{

    var isRight = true;
    try{ xmlHttp = new XMLHttpRequest(); }
    catch(trymicrosoft)
    {
        try{xmlHttp = new ActiveXobject("Msxml2.XMLHTTP");}
        catch(othermicrosoft)
        {
            try{xmlHttp = new ActiveXobject("Microsoft.XMLHTTP");}
            catch(failed)
            {
                isRight = false;
            }
        }
    }
    if(!isRight)
      alert("XML对象创建失败");
}

//分页
function GotoPage(actiontmp)
{
    PageCurrenNO = document.getElementById("PageCurren").innerText;
    MaxPageNO = document.getElementById("PageCount").innerText;              

    if(PageCurrenNO=="" || PageCurrenNO==null)
    {
        PageCurrenNO = 1;
    }
    if(PageCurrenNO==1&&actiontmp=="pre")
    {
       alert("以经是第一页");
       return;
    }
    if(PageCurrenNO==MaxPageNO&&actiontmp=="next")
    {
       alert("以经是最后一页");
       return;
    }
    if(actiontmp=="go")
    {
        n = document.getElementById("govalue").value;
        if(n>MaxPageNO)
        {
          alert("不能超过最大页");
          return;
        }
        var reg  = /(^[1-9]{1}[0-9]{0,}$)/;
        if(!reg.test(n))
        {
           alert("输入数字不是有效页码请重新输入");
           return;        
        } 
    }
    
    ShowID = document.getElementById("M1_0");
    ShowID.innerHTML="正在载入......";
    //创建xmlHttp对象
    createXMLHttpRequest()
    //第一页
    if(actiontmp=="a")
    {
         n =1;
        document.getElementById("PageCurren").innerText="1";
        url = "CreatePageAjax.aspx?PageNo=1";
        xmlHttp.open("GET",url,true);
        xmlHttp.onreadystatechange = CreateData;
        xmlHttp.send(null);
    }
    //最后一页
    if(actiontmp=="z")
    {
        n = MaxPageNO;
        url = "CreatePageAjax.aspx?PageNo="+MaxPageNO;
        xmlHttp.open("GET",url,true);
        xmlHttp.onreadystatechange = CreateData;
        xmlHttp.send(null);
    }
    //上一页
    if(actiontmp=="pre")
    {
        n = parseInt(PageCurrenNO)-parseInt(1);
        url = "CreatePageAjax.aspx?PageNo="+n;
        xmlHttp.open("GET",url,true);
        xmlHttp.onreadystatechange = CreateData;
        xmlHttp.send(null);       
    }
    //下一页
    if(actiontmp=="next")
    {
        n =  parseInt(PageCurrenNO)+parseInt(1);
        url = "CreatePageAjax.aspx?PageNo="+n;
        xmlHttp.open("GET",url,true);
        xmlHttp.onreadystatechange = CreateData;
        xmlHttp.send(null);  
    }
    //下拉框选择跳转
    if(actiontmp=="pagechange")
    {
        var thisobj = document.getElementById("svalue");
        n = thisobj.options(thisobj.selectedIndex).value;
        url = "CreatePageAjax.aspx?PageNo="+n;
        xmlHttp.open("GET",url,true);
        xmlHttp.onreadystatechange=CreateData;
        xmlHttp.send(null);
    }
    //输入数字跳转
    if(actiontmp=="go")
    {
        n = document.getElementById("govalue").value;
        var reg  = /(^[1-9]{1}[0-9]{0,}$)/;
        if(reg.test(n))
        {
           url = "CreatePageAjax.aspx?PageNo="+n;
           xmlHttp.open("GET",url,true);
           xmlHttp.onreadystatechange = CreateData;
           xmlHttp.send(null);         
        }
        else
        {
           alert("输入数字不是有效页码请重新输入");
           return;        
        } 
    }
    //生成下拉列表
    CreateSelect();
    //改变所有控件当前页码值
    ChangePageVaue();
 }

//创健数据
 function CreateData()
 {
    if(xmlHttp.readyState=="4")
      if(xmlHttp.status=="200")
      {
        //ShowID.innerHTML=
        
        Rowset = xmlHttp.responseText;
        //转换成JSON格式
        Rowset = Rowset.parseJSON();
        //创退表格
        CreateTable();
        ShowID.innerHTML=ShowTalbe;
       }
       else
       {
            ShowID.innerHTML="数据读取错误"+xmlHttp.status;
       }       
  }
  //创建表格
  function CreateTable()
  {
     //获取最大页
      document.getElementById("PageCount").innerText = Rowset.PageInfo[0].PageCount;
      MaxPageNO = Rowset.PageInfo[0].PageCount;
     //获取当前页
      document.getElementById("PageCurren").innerText =  Rowset.PageInfo[0].PageNo;
     //获取显示记录条数
     var m = parseInt(Rowset.PageInfo[0].ShowRows);
     ShowTalbe = "<table>";
     var ID;
     var FirstName;
     var LastName;
     var Country;
     var Note;
     var ClasName;
     ClasName = "tr_head"
     ShowTalbe = ShowTalbe +"<tr class='"+ClasName+"'><td>ID</td><td>FirstName</td><td>LastName</td><td>LastName</td><td>Country</td><td>Note</td></tr>";
     for(var i=0;i<m;i++)
     {
        ID        = Rowset.RecordList[i].ID;
        FirstName = Rowset.RecordList[i].FirstName;
        LastName  = Rowset.RecordList[i].LastName;
        Country   = Rowset.RecordList[i].Country;
        Note      = Rowset.RecordList[i].Note;

        ShowTalbe = ShowTalbe +"<tr ><td>"+ID+"</td><td>"+FirstName+"</td><td>"+LastName+"</td><td>"+LastName+"</td><td>"+Country+"</td><td>"+Note+"</td></tr>";
     }
     ShowTalbe = ShowTalbe+"</table>";
 }
 //生成页码下拉列表
 function CreateSelect()
 {
    var valuetmp = document.getElementById("selectarea").innerText;
    if(valuetmp==null||valuetmp=="")
    {
        var str = "<select id="svalue" onchange="GotoPage('pagechange');">"
        for(var j=1;j<50;j++)
       {
          str = str+"<option value='"+j+"'>"+j+"</option>";
       }
       str = str + "</select>"    
      document.getElementById("selectarea").innerHTML =  str;
      //alert(str);
        //function add(){
        //var s=document.getElementById("lbxAccepter");
        //var n=hid.value;
        //hid.value=parseInt(n)+1;
       //var op=new Option(n,n);
       //s.add(op);
    }
 }
 //改变所有控件当前页码值
 function ChangePageVaue()
 {
     document.getElementById("govalue").value=n;
     if(n<50)
     {  
        var thisobj = document.getElementById("svalue"); 
        var mm = parseInt(n)-1;
        thisobj.options[mm].selected = true;
     }
 } 
// ]]>
</script>

</head>
<body onload="GotoPage('a')">
<div id="M1_0"></div>
共<span id="PageCount"></span>页&nbsp;
第<span id="PageCurren"></span>页&nbsp;
<span><a href="javascript:GotoPage('a');">首页</a></span>&nbsp;
<span><a href="javascript:GotoPage('pre');">上一页</a></span>&nbsp;
<span><a href="javascript:GotoPage('next');">下一页</a></span>&nbsp;
<span><a href="javascript:GotoPage('z');">末页</a></span>&nbsp;
<span id="selectarea"></span>&nbsp;
<span>
   <input id="govalue" type=text maxlength="6"  size="5" value="1"/>
   <input type=button value="go" onclick="GotoPage('go')"/>
</span>
</body>
</html>

CreatePageAjax.aspx只有两句

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CreatePageAjax.aspx.cs" Inherits="CreatePageAjax" %>
<%@ OutputCache Duration="60" VaryByParam="PageNo" %>


CreatePageAjax.aspx.cs
根据获取到的页码，查询相关数据。并转换成JSON类型字符串输出。

// (c) Copyright XXXXXXX Corporation.
// 多方式AJAX分页
// See 
// Email:alphacn@126.com
// MSN  :cyulicn@hotmail.com
// 2007.9.25 Alpha 

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

using System.Data.SqlClient;
using System.Text;
using System.Xml;

/// <summary>
/// 根据页码读取本页内容
/// </summary>
public partial class CreatePageAjax : System.Web.UI.Page
{
    //当前页码
    private int PageNo;
    //当前页临时量
    private string PageNoTemp;
    //总页数
    private int PageCount;
    //总记录数
    private int ShowNumbers;
    //每页显示的条数
    private int ShowRows=20;
    //查询SQL语句
    private string SqlStr;
    //开始条数
    private int StartRows;
    //总页数缓存变量
    object o;
    
    /// <summary>
    /// 
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void Page_Load(object sender, EventArgs e)
    {
        //获取当然页码
        PageNoTemp = Request.QueryString["PageNo"];
        //PageNoTemp为空默认为第一页
        if (PageNoTemp == null || PageNoTemp == "")
        {
            PageNo = 1;
        }
        else
        {
            PageNo = int.Parse(PageNoTemp);
        }
        //总页数缓存变量
        o = ViewState["PageCount"];

        using(SqlConnection Conn = new SqlConnection("server=.;database=PubData;uid=sa;pwd=123456"))
        {
            //打开数据库链接
            Conn.Open();
            //o为空表示该用户第一次访问，需要统计总页数
            if (o == null)
            {
                SqlStr = "select count(ID) from TestTable";
                SqlCommand cmd3 = new SqlCommand(SqlStr, Conn);
                SqlDataReader  dr = cmd3.ExecuteReader();
                dr.Read();
                ShowNumbers = int.Parse(dr[0].ToString());
                if(ShowNumbers % ShowRows>0)
                {
                    PageCount = (ShowNumbers / ShowRows) + 1;
                }
                else
                {
                    PageCount =  ShowNumbers / ShowRows;
                }
                ViewState["PageCount"] = PageCount;
                dr.Close();
            }
            //从ViewState["PageCount"]中获取总页数
            PageCount = int.Parse(ViewState["PageCount"].ToString());
            //计算开始条数
            StartRows = (this.PageNo - 1) * this.ShowRows;

            SqlStr = "select top " + ShowRows + " *  from  TestTable where ID not in(select top " + StartRows + " ID  from  TestTable order by ID desc)";
            //使用GridView传输
            //SqlDataAdapter Da = new SqlDataAdapter(SqlStr, Conn);
            //DataSet Ds = new DataSet();
            //Da.Fill(Ds, "DsTest");
            //GridView1.DataSource = Ds.Tables["DsTest"].DefaultView;
            //GridView1.DataBind();
            SqlCommand cmd = new SqlCommand(SqlStr, Conn);
            //用XML转输
            // System.Xml.XmlReader reader = cmd.ExecuteXmlReader();
            SqlDataReader reader = cmd.ExecuteReader();
            System.Text.StringBuilder sb = new StringBuilder();
            int n = 0;
            //将记录信息生成JSON格式
            sb.Append("{"RecordList":[");
            while (reader.Read())
            {
                sb.Append("{");
                sb.Append(" "ID":""+reader[0]+"",");
                sb.Append(" "FirstName":"" + reader[1] + "",");
                sb.Append(" "LastName":"" + reader[2] + "",");
                sb.Append(" "Country":"" + reader[3] + "",");
                sb.Append(" "Note":"" + reader[4] + """);
                sb.Append("},");
                n = n + 1;
            }
            sb.Append("],");
            sb.Append(""PageInfo":[{"PageCount":"" + ViewState["PageCount"] + "","PageNo":"" + PageNo + "","ShowRows":"" + n.ToString() + ""}]");
            sb.Append("}");
            reader.Close();
            //输出JSON变量
            Response.Write(sb.ToString());
            //Response.End();
        }
    }
}
 
微信商城淘宝客 微信商城淘宝客
原创粉丝点击
热门IT博客
免编程空调机组控制器免编程空调机组控制器
笔记本电脑清理 软件笔记本电脑清理 软件
jquery 3.1.1.min.js
java并发库
矩阵互动陈礼军
打国际电话软件
软件测试基础视频教程
淘宝店铺第三层级好吗
上海金特软件
springmvc配置json转换
java 文件读入字符串
好看的书法字体 知乎
2015最新网络神曲
话吧软件
hadoop 2.6.0 ubuntu
mysql怎么打开界面
sshd linux
彩票数据库
oracle linux下载
刷留言软件安卓版
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 短片故事 故事就是故事 好故事大全 儿童小故事 故事mp3 儿歌故事 听故事睡觉 小儿故事 精彩故事 经典小故事 激励小故事 佛的故事 睡觉小故事 言情故事 儿童听故事 动画故事 故事app 搞笑短故事 有声故事 长篇故事 动物故事 故事机 通话故事 小孩子故事 讲故事 儿童 真实故事 故事书大全 感情故事 儿童讲故事 明明讲故事 故事枕头 故事的英语 你的故事 亲子小故事 家教小故事雨后小故事 成功小故事 教育故事 三国故事 搞笑的故事 睡眠故事 法华经故事

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里