AJAX分页的代码(后台asp.net)

在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>   ";
htmlStr += "<a href='javascript:void' onclick='GoToPrePage()' id='aPrePage' >前一页</a>   ";
htmlStr += "<a href='javascript:void' onclick='GoToNextPage()' id='aNextPage'>后一页</a>   ";
htmlStr += "<a href='javascript:void' onclick='GoToEndPage()' id='aEndPage' >尾 页</a>   ";
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

具体的效果,大家可以把上述的代码响应的复制到VS中和数据库中,进行演示。
这个版本其实很多的功能点都是没有考虑到的,仅仅是个示例,大家可以在自己的实际项目中修改以上的功能来满足自己的需求。

(0)

相关推荐

  • 用AJAX实现的无刷新的分页实现代码(asp.net)

    之前,服务器返回的数据都是用xml的形式传给客户端的,但是xml传一个类的对象的数据会很长,流量大,所以现在都是改用json来传数据,复杂数据用json,简单数据用string.所有AJAX中的x已经失去了它原来的意义. 大家都知道JQuery,是一个Javascript的封装库,当然JQuery也实现了对AJAX的封装,这里将分页就是直接用JQuery框架来讲哈,比较简单. 首先讲一下原理:分页有两个要点:1.有多少页,2.每页有多少条记录.总页数和每页数据都是要从服务器端返回的.所以我们就先

  • asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

  • AspNetAjaxPager,Asp.Net通用无刷新Ajax分页控件,支持多样式多数据绑定

    本控件可以对GridView,Repeater,DataGrid,DataList...几乎所有的.net数据绑定控件进行分页,全部无刷新,数据绑定部分可以使用存储过程也可以直接使用sql语句,这对本控件没有任何干扰!本控件具有较好的用户界面,能够根据需要变换各种样式,配合css控制效果则更好! 1.分页样式效果图: 2.如何使用: 于bin目录下添加:AspNetAjaxPager.dll引用 aspx文件内容: 复制代码 代码如下: <%@ Page Language="C#"

  • asp.net+ajax简单分页实例分析

    本文实例讲述了asp.net+ajax简单分页实现方法.分享给大家供大家参考,具体如下: 这里涉及两个.aspx文件,一个叫Default.aspx,一个叫AjaxOperations.aspx,第一个用来显示一些测试数据,后一个用来对分页进行处理.js文件夹下面还有一个testJs.js的文件,它就是ajax操作的核心部分.不错,code is cheap.看代码: /*testJs.js*/ // 此函数等价于document.getElementById /document.all fun

  • 简单好用的ASP.NET分页类(支持AJAX、自定义文字)

    在做网站没用 JS UI控件时 很实用 用法: var ps=new PageString(); /*可选参数*/ ps.SetIsEnglish = true;// 是否是英文 (默认:false) ps.SetIsShowText = true;//是否显示分页文字 (默认:true) //ps.TextFormat="" (默认值:<span class=\"pagetext\"><strong>总共</strong>:{0

  • asp.net+Ajax 文本文件静态分页实现代码

    服务端部分 ,文本文件分页的类.主要在流中处理.当然我看过网上的用</br> 关键字进行分页的 个人觉得不是所有时候都能满足要求,所一自己写了这个,还是费了点时间,主要在于本人太笨,基础很差.希望大家个出更好的建议 复制代码 代码如下: using System; using System.Collections.Generic; using System.Text; using System.IO; namespace Txt { public class TxtPager { public

  • asp.net 使用ObjectDataSource控件在ASP.NET中实现Ajax真分页

    ListView控件本身并没有分页功能,不过借助于ASP.NET中新增加的DataPager控件,我们可以非常方便地对ListView中的数据设置分页,这几乎不需要开发人员写一行代码,将ListView控件放到页面上,设置好布局和DataSource,然后再添加一个DataPager控件,将它的PagedControlID属性设置成ListView的ID,PageSize中设置每页要显示的数据条数,然后在Fields中设置好分页的样式(当然你完全可以不用去管样式,ASP.NET会根据内置的样式来

  • asp.net使用AJAX实现无刷新分页

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

  • AJAX分页的代码(后台asp.net)

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

  • 利用jQuery中的ajax分页实现代码

    本文实例讲解了用jQuery中的ajax分页相关代码,分享给大家供大家参考,具体内容如下 把分页封装到一个jsp里,那么大家就可以通过include的方式引入分页的页面这里起名为page_ajax.jsp 本人封装后,使用者需要在页面中引入page_ajax.jsp,并且在查询列表的时候,点击按钮,调用自定义的方法,如myFunction(),在这个方法里头,调用自己拓展的jquer方法,$.pageAjax(url,functionName,showDIv); 这里的url是你要请求的ajax

  • 用jQuery中的ajax分页实现代码

    功能简介:主要功能就是分页显示数据了,可在配置文件中配置每页要显示的页码,可以做多条件联合查询,这里只是做一个简单的查询.欢迎拍砖,有问题的还望大虾们斧正哈.看看这个效果图,无刷新的噢!! 具体实现请看源码: 1.aspx页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage.aspx.cs" Inherits="Measur

  • PHP ajax 分页类代码

    <?php //本分页类不处理SQL; //大大的加快了分页功能 //http://blog.csdn.net/fkedwgwy //潇湘博客--潇湘 /** 演示 require_once('../libs/classes/page.class.php'); $page=new page(array('total'=>1000,'perpage'=>20)); echo 'mode:1<br>'.$page->show(); echo '<hr>mode:

  • 菜鸟蔡之Ajax复习第一篇(后台asp.net)(传统的JavaScript方法实现Ajax功能)

    其实最简单的可以理解为:JavaScript + XMLHttpRequest + CSS +服务器端的集合,其本质上是一种浏览器端的技术.好了, 简单的描述了一下,现在直接上代码吧! (1).功能描述: 新建两个html页面分别为1.html和2.html,在不刷新的情况下点击1.html页面上的"获取数据"按钮后,将2.html页中的内容显示在1.html页面的<div>标记中. (2).实现代码: 1.html实现代码: 复制代码 代码如下: <head>

  • JQuery运用ajax注册用户实例(后台asp.net)

    复制代码 代码如下: //JS代码 function checkname() { var Msg = document.getElementById("d_username"); var chk = CheckN(); if (chk) { $.ajax({ url: 'registerOK.aspx', type: 'POST', data: { lb: "checkname", username: $("#username").val() }

  • jQuery ajax分页插件实例代码

    推荐阅读:jQuery插件开发精品教程让你的jQuery提升一个台阶 既然说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构:(我觉得对咱们程序员来说再优美的文字描述.介绍也 比不上代码来得实在.) 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 pageSize: , preText: "pre", nextText: "next", firstText: &quo

  • ASP.NET中实现jQuery Validation-Engine的Ajax验证实现代码

    见下图: 验证的例子:http://www.position-relative.net/creation/formValidator/ 官方地址: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/ 这个插件支持大部分的浏览器,但由于有使用到了css3的阴影和圆角样式,所以在IE浏览器下无法看到圆角和阴影效果(IE 9 支持圆角效果). 本文主要内容是

  • CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解

    CodeIgniter 是一个小巧但功能强大的 PHP 框架,作为一个简单而"优雅"的工具包,它可以为开发者们建立功能完善的 Web 应用程序.是比较主流的一个PHP框架. 下面给大家介绍CI框架(ajax分页,全选,反选,不选,批量删除)完整代码,具体代码如下所示: //ajax分页+搜索(视图层) function ajax_page(page){ var sou = $('#sou').val(); $.ajax({ type: "POST", dataTyp

  • Ajax实现无刷新分页实例代码

    今天我们要用ajax做一个分页: 实现Ajax分页: 如果可以的话加上查询条件 找一张表做分页 分页不使用page类 页面不用刷新 Ajax加载数据 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="jquery-1.11.2.

随机推荐