用户名:  密码:
兄弟在线   

标题:ajax分页

作者:agui005 来源:http://www.xdlmn.com 时间:2013-05-23

在ASP.NET 中有很多数据展现的控件,比如用的最多的GridView,它同时也自带了分页的功能。但是我们知道用GridView来显示数据,如果没有禁用ViewState,页面的大小会是非常的大的。而且平时我们点击首页,下一页,上一页,尾页这些功能都是会引起页面回发的,也就是需要完全跟服务器进行交互,来回响应的时间,传输的数据量都是很大的。AJAX的分页可以很好的解决这些问题。

开发的坏境是:jQuery AJAX+Northwind。
 

具体的步骤:

SearchCustomer.aspx:

 

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        var pageIndex = 0;
        var pageSize = 10;
        $(function () {
            $("#btnSearch").click(function () {
                /*
                name  顾客的名字, 文本框中输入的内容
                0         表示的是第1页
                10       每页的大小
                */
                var name = $("#txtSearch").val();
                pageIndex = 0;
                AjaxGetData(name, pageIndex, pageSize);
            });
        });

        function AjaxGetData(name, index, size) {
            $.ajax({
                url: "jQueryPaging.aspx",
                type: "Get",
                data: "Name=" + name + "&PageIndex=" + index + "&PageSize=" + size,
                dataType: "json",
                success: function (data) {
                    var htmlStr = "";
                    htmlStr += "<table>"
                    htmlStr += "<thead>"
                    htmlStr += "<tr><td>CustomerID</td><td>CompanyName</td><td>ContactName</td><td>ContactTitle</td><td>Address</td><td>City</td></tr>"
                    htmlStr += "</thead>";
                    htmlStr += "<tbody>"
                    for (var i = 0; i < data.Customers.length; i++) {
                        htmlStr += "<tr>";
                        htmlStr += "<td>" + data.Customers[i].CustomerID + "</td>"
                                          + "<td>" + data.Customers[i].CompanyName + "</td>"
                                          + "<td>" + data.Customers[i].ContactName + "</td>"
                                          + "<td>" + data.Customers[i].ContactTitle + "</td>"
                                          + "<td>" + data.Customers[i].Address + "</td>"
                                          + "<td>" + data.Customers[i].City + "</td>"
                        htmlStr += "</tr>";
                    }
                    htmlStr += "</tbody>";
                    htmlStr += "<tfoot>";
                    htmlStr += "<tr>";
                    htmlStr += "<td colspan='6'>";
                    htmlStr += "<span>共有记录" + data.Count + ";共<span id='count'>" + (data.Count % 10 == 0 ? parseInt(data.Count / 10) : parseInt(data.Count / 10 + 1)) + "</span>页" + "</span>";
                    htmlStr += "<a href='javascript:void' onclick='GoToFirstPage()' id='aFirstPage' >首    页</a>&nbsp;&nbsp; ";
                    htmlStr += "<a href='javascript:void' onclick='GoToPrePage()' id='aPrePage' >前一页</a>&nbsp;&nbsp; ";
                    htmlStr += "<a href='javascript:void' onclick='GoToNextPage()' id='aNextPage'>后一页</a>&nbsp;&nbsp; ";
                    htmlStr += "<a href='javascript:void' onclick='GoToEndPage()' id='aEndPage' >尾    页</a>&nbsp;&nbsp; ";
                    htmlStr += "<input type='text' /><input type='button'  value='跳转' onclick='GoToAppointPage(this)' /> ";
                    htmlStr += "</td>";
                    htmlStr += "</tr>";
                    htmlStr += "</tfoot>";
                    htmlStr += "</table>";

                    $("#divSearchResult").html(htmlStr);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest);
                    alert(textStatus);
                    alert(errorThrown);
                }
            });
        }
        //首页
        function GoToFirstPage() {
            pageIndex = 0;
            AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
        }
        //前一页
        function GoToPrePage() {
            pageIndex -= 1;
            pageIndex = pageIndex >= 0 ? pageIndex : 0;
            AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
        }
        //后一页
        function GoToNextPage() {
            if (pageIndex + 1 < parseInt($("#count").text())) {
                pageIndex += 1;
            }
                AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
        }
        //尾页
        function GoToEndPage() {
            pageIndex = parseInt($("#count").text()) - 1;
            AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
        }
        //跳转
        function GoToAppointPage(e) {
            var page = $(e).prev().val();
            if (isNaN(page)) {
                alert("请输入数字!");
            }
            else {
                var tempPageIndex = pageIndex;
                pageIndex = parseInt($(e).prev().val())-1;
                if (pageIndex < 0 || pageIndex >= parseInt($("#count").text())) {
                    pageIndex = tempPageIndex;
                    alert("请输入有效的页面范围!");
                }
                else {
                    AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
                }
            }
        }
    </script>
数据的传输用的JSON格式。大家知道JSON是轻量级别的数据传输。前台的展现时用的table。这样生成的HTML代码很简洁。

 

HTML如下:

 

<div>
            <input type="text" id="txtSearch" />
            <input type="button" id="btnSearch" value="Search" />
    </div>
    <div id="divSearchResult">
 
    </div>

 

jQueryPaging.aspx页面的CS代码如下:

 

public partial class jQueryPaging : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Int32 pageIndex=Int32.MinValue;
            Int32 pageSize=Int32.MinValue;
            String name=String.Empty;
              JavaScriptSerializer jss=new JavaScriptSerializer();
            if(Request["Name"]!=null)
            {
                     name=Request["Name"].ToString();
                     if (Request["PageIndex"] != null)
                     {
                         pageIndex = Int32.Parse(Request["PageIndex"].ToString());
                         pageSize = Request["PageSize"] != null ? Int32.Parse(Request["PageSize"].ToString()) : 10;
                         IList<Customer> customersLists = new List<Customer>();
                         Customer c = null;
                        DataSet ds= LookDataFromDB(name,pageIndex,pageSize);
                        foreach (DataRow row in ds.Tables[0].Rows)
                        {
                            c = new Customer();
                            c.CustomerID = row["CustomerID"].ToString();
                            c.CompanyName = row["CompanyName"].ToString();
                            c.ContactName = row["ContactName"].ToString();
                            c.ContactTitle = row["ContactTitle"].ToString();
                            c.Address = row["Address"].ToString();
                            c.City = row["City"].ToString();
                            customersLists.Add(c);
                        }
                         
                        if (customersLists.Count>0)
                        {
                            Response.Write("{\"Count\":"+ds.Tables[1].Rows[0][0]+",\"Customers\":"+jss.Serialize(customersLists)+"}");
                            Response.End();    
                        }
                     }
            }
        }

        private DataSet LookDataFromDB(string name, int pageIndex, int pageSize)
        {
            SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);
            conn.Open();
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = conn;
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.CommandText = "SearchCustomerByName";
            cmd.Parameters.Add(new SqlParameter("@name",name));
            cmd.Parameters.Add(new SqlParameter("@pageIndex",pageIndex));
            cmd.Parameters.Add(new SqlParameter("@pageSize", pageSize));
            SqlDataAdapter dataAdapter = new SqlDataAdapter(cmd);
            DataSet ds = new DataSet();
            try
            {
                dataAdapter.Fill(ds);
            }
            catch (Exception)
            {

            }
            finally
            {
                if (dataAdapter != null)
                {
                    dataAdapter.Dispose();
                }
                if (cmd != null)
                {
                    cmd.Dispose();
                }
                if (conn != null)
                {
                    conn.Dispose();                
                }
            }
            return ds;
        }
    }
还有我们在CS中定义的Model类:

 

 

public class Customer
    {
        public String CustomerID { get; set; }
        public String CompanyName { get; set; }
        public String ContactName { get;set;}
        public String ContactTitle { get; set; }
        public String Address { get; set; }
        public String City { get; set; }
    }
SearchCustomerByName 存储过程的代码如下:
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
Create PROCEDURE SearchCustomerByName
    @name nvarchar(30),
    @pageIndex int,
    @pageSize  int
AS
BEGIN
    SET NOCOUNT ON;
select t.CustomerID,t.CompanyName,t.ContactName,t.ContactTitle,t.Address,t.City from
(
    select Row_Number() over (order by CustomerID) AS RowNum,* from Customers where ContactName like '%'+@name+'%'
) t
where t.RowNum between @pageIndex*10+1 and (@pageIndex+1)*10

select count(*) from Customers
where ContactName like '%'+@name+'%'

END
GO


总点击 [1920]   评论  0 查看评论
上一篇:oracle 年周转换
下一篇:限制文本框只能输入数字和小数点
【关闭窗口】
您可能感兴趣的文章
我要评论
          
评论标题:   可以输入250
 
验证数字: 8 + 7 =
兄弟友情提示
· 请自觉遵守国家有关法律、法规,尊重网上道德。
· 兄弟在线坚决抵制不良言行,违者文责自负。
· 如果文章有版权或其他问题等,请联系我们,我们会尽快处理。
· 文章注名来自网络的旨在传播共享信息,不做其它用途;注名原创的本站支持原创,但不代表同意其观点。
· 兄弟在线拥有管理用户与其文章和评论的一切权利,并有权在网站内转载或引用。
兄弟在线
兄弟热门文章
兄弟推荐文章
兄弟站内搜索

兄弟感兴趣的文章
兄弟最新影视