利用Ajax实现DataGrid无刷新分页(AjaxGrid)

转载 2007年09月27日 17:20:00

效果图

DataGrid功能强大,我们只用写几行代码就能够实现复杂的页面数据显示。数据多的时候免不了要分页显示,DataGrdi本身自带分页功能,但是当数据量少的时候很方便,当大数据量时,DataGrid得分页机制就不太好了。于是在网上找到了一种比较好的利用存储过程实现分页机制(客户端想要第几页就取第几页数据,上十万级的数据查询也很快,数据量再多的时候就没试过了,等有时间把利用存储过程分页也写在blog上)在工作中为了让客户用的更舒服点,也赶时髦,想利用Ajax来实现DataGrid无刷新分页。主要用RenderControl方法把DataGrid翻译成Html代码,然后用Web Service 返回。当然也可以用别的方法。

GenericAjaxWS.asmx.cs

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient;
using System.Diagnostics;
using System.Web;
using System.Web.Services;
using System.Configuration;
using System.Web.UI.WebControls;
using System.Web.UI;
using System.IO;

namespace GenricAjaxWS
{
      [WebService(Namespace="http://localhost/GenricAjaxWS/")]
      public class GenricAjaxWS : System.Web.Services.WebService
      {
            SqlConnection con;
            SqlDataAdapter da;
            SqlCommand cmd;
            DataSet ds;

            public GenricAjaxWS()
            {
              InitializeComponent();
              con= new SqlConnection(ConfigurationSettings.AppSettings["Connect"]);
              da=new SqlDataAdapter("",con);
              cmd=new SqlCommand("",con);
              ds=new DataSet("TahaSchema");
            }

            #region Component Designer generated code

            //Required by the Web Services Designer
            private IContainer components = null;

            /// <summary>
            /// Required method for Designer support - do not modify
            /// the contents of this method with the code editor.
            /// </summary>
            private void InitializeComponent()
            {
            }

            /// <summary>
            /// Clean up any resources being used.
            /// </summary>
            protected override void Dispose( bool disposing )
            {
              if(disposing && components != null)
              {
                    components.Dispose();
              }
              base.Dispose(disposing);
            }
           
            #endregion
 
/// <summary>
/// this function accepts TSql statment and returns dataset
/// </summary>
 

            [WebMethod]
            public string getGrid(string sqlStr,int pageIndex)
            {
              da.SelectCommand.CommandText=sqlStr;
              da=new SqlDataAdapter(sqlStr,con);
              da.Fill(ds,"myTable");

              DataGrid dataGrid = new DataGrid();
              dataGrid.AutoGenerateColumns = true;
              dataGrid.DataSource = ds.Tables["myTable"].DefaultView;
              dataGrid.AllowPaging = true;
              dataGrid.PageSize = 4;
              dataGrid.PagerStyle.Visible = false;
              dataGrid.CurrentPageIndex = pageIndex;
              try
              {
                    dataGrid.DataBind();
              }
              catch(Exception)
              {

              }
              StringWriter wr = new StringWriter();
              HtmlTextWriter writer = new HtmlTextWriter(wr);
              dataGrid.RenderControl(writer);
              string gridHtml = wr.ToString();
              wr.Close();
              writer.Close();
              DropDownList ddl_Pager = new DropDownList();
              ddl_Pager.Attributes.Add("onchange","goToPage(this.value)");
              string pager="";
              for(int i=0;i<dataGrid.PageCount;i++)
              {
                ListItem lItem = new ListItem(i.ToString(),i.ToString());
                ddl_Pager.Items.Add(lItem);
                if(i==pageIndex)
                {
                  pager += "[background-color:#ffdd11;width" +
                         ":20px;align:center/"><a href=/"#/" onclick" +
                         "=/"goToPage('"+i+"')/">"+i+"</a>]";
                }
                else
                {
                  pager += "[width:20px;align:center/">" +
                         "<a href=/"#/" onclick=/"goToPage" +
                         "('"+i+"')/" >"+i+"</a>]";
                }
              }
              ddl_Pager.SelectedIndex = pageIndex;
              wr = new StringWriter();
              writer = new HtmlTextWriter(wr);
              ddl_Pager.RenderControl(writer);
              string pagerHtml = "<input type='button'" +
                                 " value='<' onclick='goToPrevPage()'>";
              pagerHtml += wr.ToString();
              pagerHtml += "<input type='button' value='>'" +
                           " onclick='this.disabled=goToNextPage()'>";
              wr.Close();
              writer.Close();
              return pager+pagerHtml+"<br>"+gridHtml;
            }
      }
}

上面的是Web服务,然后利用Ajax请求这个服务来获取要现实的数据。以下是客户端JavaScript代码:

AjaxFuncs.js


//声明异步请求对象

/////////////////////////////////////////////////////////////////
var xmlhttp;
/////////////////////////////////////////////////////////////////
//填充DataGrid,这个函数有3个参数。

//第一个是包含DataGrid的DIV的ID

//第二个是查询数据的sql语句

//第三个是要获取第几页数据


/////////////////////////////////////////////////////////////////
var ph;
var fillGrid_Str_SQL="";
var currentPageIndex ;
function fillGrid(myPH,str_Sql,pageIndex){
      ph = window.document.getElementById(myPH);
      fillGrid_Str_SQL = str_Sql;
      currentPageIndex = pageIndex;
      var url = "http://localhost/GenricAjaxWS/GenricAjaxWS" +
                ".asmx/getGrid?sqlStr="+str_Sql+
                "&pageIndex="+pageIndex;

      if(window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
        xmlhttp.onreadystatechange=fillGrid_Change;
        xmlhttp.open("GET",url,true);
        xmlhttp.send(null);
    }
    //code for IE
    else if (window.ActiveXObject)
        {
        try
            {
            xmlhttp= new ActiveXObject("Msxml2.XMLHTTP");
            }
        catch(e)
            {
            try
            {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){}
        }

        if(xmlhttp)
        {
            try
            {
            xmlhttp.onreadystatechange=fillGrid_Change;
            xmlhttp.open("GET",url,false);
            xmlhttp.send();
            }
            catch(e){}
        }
    }
}

function fillGrid_Change()
{
      if(xmlhttp.readyState==4&&xmlhttp.status==200)
      {
          //var rows=xmlhttp.responseXML.
          //        selectNodes(".//TahaSchema//TahaTable");
          var row =   xmlhttp.responseXML.selectNodes(".//");
          ph.innerHTML = row[1].text;
      }
}

function goToPage(pageIndex){
      fillGrid(ph.id,fillGrid_Str_SQL,pageIndex)
}
 
function goToNextPage(){
      try{ 
            fillGrid(ph.id,fillGrid_Str_SQL,
                     parseInt(currentPageIndex)+1);
            return false;
      }
      catch(e){
            return true;
      }
}

function goToPrevPage(){
      fillGrid(ph.id,fillGrid_Str_SQL,
               parseInt(currentPageIndex)-1)
}

最后就是显示数据的html页面,实例代码如下:

AjaxGrid.html:

<html>
  <head>
    <title>AjaxGrid</title>
  <script language="javascript"
        type="text/javascript" src="ajaxFuncs.js"></script>
  </head>
  <body  onload="fillGrid('myPH','select * from sales',1)">
           
    <form id="Form1" method="post" runat="server">
                        <div id="myPH" ></div>
     </form>
  </body>
</html>

到此利用Ajax实现DataGrid无刷新分页就完成了。

 

利用Ajax实现DataGrid无刷新分页(AjaxGrid)

  • soarheaven
  • soarheaven
  • 2006年09月24日 01:17
  • 6259

PHP-Ajax实现无刷新分页

1.创建数据库并插入数据 create database shop; use shop; CREATE TABLE ecs_goods ( goods_id INT UNSIGNED NOT NU...
  • bbs375
  • bbs375
  • 2016年08月15日 13:58
  • 1303

ajax实现无刷新分页功能

原理:前台换用ajax将页码以post的方式传到后台,后台接收页码,后台的操作与用php实现分页功能大致一样,只是还需将总页数传到前台,以便在前台输出分页链接。 那么前台怎样传页码呢???只需用aja...
  • zls986992484
  • zls986992484
  • 2016年08月05日 23:14
  • 4349

基于TP框架写的ajax无刷新分页

请细心观看代码,其实不难
  • sunxiaowen13
  • sunxiaowen13
  • 2017年02月20日 11:27
  • 1998

Jquery+ajax+PHP 基于thinkPHP的无刷新分页

功能描述:以带着参数的形式加载Listinfo页面,形如: http://无法访问的链接/index.php?g=Baoliao&m=Index&a=listinfo&id=1 或者是: htt...
  • CSDN_GOON
  • CSDN_GOON
  • 2015年12月28日 18:06
  • 2553

thinkphp中使用ajax实现无刷新分页

1、修改thinkphp的/ThinkPHP/Library/Think/Page.class.php文件,如下:
  • Wss0130
  • Wss0130
  • 2015年12月23日 21:52
  • 4403

PHP + AJAX 实现无刷新分页 不刷新页面实现分页 PHP AJAX

index.php代码:  header("Content-Type:text/html;charset=utf-8"); ?> AJAX-无刷新分页      by:siyuantlw ...
  • haibo0668
  • haibo0668
  • 2016年08月12日 16:29
  • 3862

Java servlet+Ajax 用户管理(完全无刷新增删改查及分页)

初入职场,在这程序员一抓一大把的时代,要生存,就要什么都要学一点,什么都要会一点。在java世界里目前充斥着各种框架,struts,spring……但究其根本还是离不开servlet,故鄙人从java...
  • Dynastqin
  • Dynastqin
  • 2012年12月25日 15:35
  • 6093

SSH三大框架的整合+利用Ajax实现无刷新分页

以下是我利用Struts2.3.24、Spring4.0、Hibernate4.2 结合Mysql数据库进行的ssh整合,实现分页需要json.js 首先ssh的整合需要导入所有的jar包在web....
  • qq_34078119
  • qq_34078119
  • 2017年02月20日 22:45
  • 1966

jquery ajax 无刷新分页

jquery ajax 无刷新分页 + 进度条显示
  • codercwm
  • codercwm
  • 2016年05月26日 17:03
  • 3259
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用Ajax实现DataGrid无刷新分页(AjaxGrid)
举报原因:
原因补充:

(最多只允许输入30个字)