查询功能是开发中最重要的一个功能,大量数据的显示,我们用的最多的就是分页。

在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' οnclick='GoToFirstPage()' id='aFirstPage' >首    页</a>&nbsp;&nbsp; ";htmlStr += "<a href='javascript:void' οnclick='GoToPrePage()' id='aPrePage' >前一页</a>&nbsp;&nbsp; ";htmlStr += "<a href='javascript:void' οnclick='GoToNextPage()' id='aNextPage'>后一页</a>&nbsp;&nbsp; ";htmlStr += "<a href='javascript:void' οnclick='GoToEndPage()' id='aEndPage' >尾    页</a>&nbsp;&nbsp; ";htmlStr += "<input type='text' /><input type='button'  value='跳转' οnclick='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
BEGINSET 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)*10select count(*) from Customers
where ContactName like '%'+@name+'%'END
GO

具体的效果,大家可以把上述的代码响应的复制到VS中和数据库中,进行演示。 

这个版本其实很多的功能点都是没有考虑到的,仅仅是个示例,大家可以在自己的实际项目中修改以上的功能来满足自己的需求。

转载于:https://www.cnblogs.com/kennyliu/p/3444098.html

AJAXA进行分页(2)相关推荐

  1. 手把手教你JavaEE的分页查询、分页展示,有了这个,你的项目又多了一个谈资

    前言: 我们在写项目的时候,往往有一些项目的信息展示.而展示的数据量往往是很大的,这时候,加入一个分页的功能往往是最理想的选择. 先简单描述一下功能: 根据你的数据量和指定的页面展示数据条数,进行查询 ...

  2. django自带的分页功能

    django自带的分页功能 django中自带的分页功能有缺陷,但是也是一种思路,所以在下做一个整理,方便以后使用,还有服务各位小伙伴. django视图部分的代码.(注释才是重点) from dja ...

  3. Mysql分页order by数据错乱重复

    公司用的是Mybatis,发现分页和排序时直接传递参数占位符用的都是 ,由于,由于,由于有SQL注入风险,要改为#,但是封装page类又麻烦,所以直接使用了 pageHelper 插件了,方便快捷,但 ...

  4. Django 分页和使用Ajax5.3

    分页 Django提供了一些类实现管理数据分页,这些类位于django/core/paginator.py中 Paginator对象 Paginator(列表,int):返回分页对象,参数为列表数据, ...

  5. [JAVA EE] JPA 查询用法:自定义查询,分页查询

    项目已上传:https://codechina.csdn.net/qq_36286039/javaee 自定义查询 问题:内置的crud功能不满足需求时如何添加自定义查询? 几种自定义查询方法 方法命 ...

  6. datatable java实现分页_jQuery Datatable - 使用Php的服务器端处理数据分页

    我有jquery datatable分页的问题(服务器端处理) . 例如,我在数据库中有 24 条记录 . 计数正确显示,总分页也正确显示 . 当我点击 Next or 2nd page 时,它会根据 ...

  7. Oracle分页存储过程

    CREATE OR REPLACE Procedure Soa_Getpager(p_Pagesize Int, --每页记录数p_Pageno Int, --当前页码,从 1 开始p_Sqlcols ...

  8. mybaties分页

    首先引入jar包: <dependency><groupId>com.github.pagehelper</groupId><artifactId>pa ...

  9. Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

最新文章

  1. 使用随机森林(Random Forest)进行特征筛选并可视化
  2. nginx在windows里面配置
  3. php 字符串的处理
  4. 一篇不一样的docker原理解析
  5. 首届中国高校计算机大赛-人工智能创意赛启动,百度加盟全面赋能
  6. 高德地图轨迹PHP,轨迹回放-点标记-示例中心-JS API 示例 | 高德地图API
  7. P4389-付公主的背包【生成函数,多项式exp】
  8. STM32——SPI接口
  9. php怎么选择路径,利用php+mcDropdown实现文件路径可在下拉框选择
  10. ACM——2的n次方
  11. 数据分析师必学第一课:构建完整的指标体系
  12. 【Java -- 设计模式】UML 统一建模语言
  13. QQ聊天 代码 输入表情
  14. Less变量动态修改
  15. 小岚rabbit_radish(兔仔-萝卜)
  16. 前端:css中的多列的实现与介绍
  17. 基于android的记账本国内外研究现状,基于android系统的记账本的设计与实现.doc
  18. python matplotlib柱状图显示数据标签及百分号
  19. Python实现Excel办公自动化
  20. 2017.3.15 贾老分享有感

热门文章

  1. 安装虚拟机Ubuntu,搭建lnmp环境碰到的坑(二)
  2. Java程序员校招蚂蚁金服,mysql培训考试
  3. 【深度学习入门到精通系列】医学图像预处理—灰度转换代码(G通道)
  4. Tensorflow【实战Google深度学习框架】—TensorBoard
  5. 本地Windows远程桌面连接阿里云Ubuntu 16.04服务器:
  6. ubunto安装mysql8.13_ubuntu安装mysql[ubuntu部署]
  7. php 数组接在数组后面,PHP array_splice()接合数组用法的简单介绍
  8. mysql查看防火墙状态命令_Linux设置允许指定端口通过防火墙centos7
  9. 组态王与c语言混合编程6,亚控 组态王嵌入版6.1
  10. html百度地图标记图标,百度地图开发之点击地图给该位置添加标注(图标)并弹出对应的位置...