ASP.NET无刷新分页：jQuery + Ajax + JSON 实例

144 浏览量更新于2024-08-30 收藏 57KB PDF 举报

该资源提供了一个使用ASP.NET、jQuery、Ajax和JSON技术在网页中实现无刷新分页的实例代码。通过结合这些技术，可以创建一个动态更新的用户体验，无需整个页面重新加载即可查看不同页面的数据。在ASP.NET中，`<%@ Page %>`指令用于定义页面的基本属性，如编程语言(C#)、自动事件绑定(AutoEventWireup)以及代码文件(CodeFile)。`<head>`部分包含了CSS和JavaScript引用，用于页面样式和功能的实现。特别是`jquery-1.4.4.min.js`是jQuery库，而`jquery.pagination.js`是一个用于分页的jQuery插件。 JavaScript部分定义了两个变量：`pageIndex`表示当前页面索引，初始值为0；`pageSize`表示每页显示的记录数，初始化为10，可以通过修改这个值来改变每页显示的条目数量。`$(function(){})`是jQuery的DOM准备就绪事件，确保在页面加载完成后执行初始化表格(`InitTable(0)`)和设置分页的功能。分页功能通过调用`$("#Pagination").pagination()`方法实现，其中`<%=pageCount%>`是服务器端传入的总页数。分页插件提供了回调函数`PageCallback`，在用户点击分页链接时触发，处理新的请求并更新页面内容。`prev_text`和`next_text`分别设置了“上一页”和“下一页”按钮的文本。在实际的`AjaxJson.aspx.cs`代码文件中，服务器端会处理Ajax请求，计算出相应的数据块，然后将这些数据序列化为JSON格式，返回给客户端。客户端的JavaScript代码接收到JSON数据后，将更新表格内容，实现无刷新分页的效果。这个实例对于理解如何在ASP.NET环境中结合jQuery和Ajax创建交互式用户体验非常有帮助，同时也展示了如何利用JSON进行数据交换，以及如何使用第三方库来简化分页功能的实现。

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/xhtml1/DTD/xhtml1-

transitional.dtd”>

<title>Jquery+Ajax+Json分页</title>

var pageIndex = 0; //页面索引初始值

var pageSize = 10; //每页显示条数初始化，修改显示条数，修改这里即可

$(function () {

InitTable(0); //Load事件，初始化表格数据，页面索引为0（第一页）

//分页，PageCount是总条目数，这是必选参数，其它参数都是可选

$(“#Pagination”).pagination(<%=pageCount %>, {

callback: PageCallback,

prev_text: ‘上一页’, //上一页按钮里text

next_text: ‘下一页’, //下一页按钮里text

items_per_page: pageSize, //显示条数

num_display_entries: 6, //连续分页主体部分分页条目数

current_page: pageIndex, //当前页索引

num_edge_entries: 2 //两侧首尾分页条目数

});

//翻页调用

function PageCallback(index, jq) {

InitTable(index);

}

//请求数据

function InitTable(pageIndex) {

$.ajax({

type: “POST”,

dataType: “json”,

url: ‘SupplyAJAX.aspx’, //提交到一般处理程序请求数据

data: “type=show&random=” + Math.random() + “&pageIndex=” + (pageIndex + 1) + “&pageSize=” + pageSize, //

提交两个参数：pageIndex(页面索引)，pageSize(显示条数)

error: function () { alert(‘error data’); }, //错误执行方法

success: function (data) {

$(“#Result tr:gt(0)”).remove(); //移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）

var json = data; //数组

var html = “”;

$.each(json.data, function (index, item) {

//循环获取数据

var id = item.Id;

var name = item.Name;

var sex = item.Sex;

html += “<tr><td>” + id + “</td><td>” + name + “</td><td>” + sex + “</td></tr>”;

});

$(“#Result”).append(html); //将返回的数据追加到表格

}

});

}

});

</script>

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38499503

粉丝: 8
资源: 975

ASP.NET无刷新分页：jQuery + Ajax + JSON 实例

asp生成json数据-调试实例

asp输出json对象实例

asp输出json实例，json.asp

【ASP.NET编程知识】asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码.docx

ASP.NET利用jQuery+Ajax+Json实现无刷新分页实例

ASP.NET中Jquery+Ajax+Json无刷新分页实例代码详解

asp +JqueryAjax+access 无刷新分页

jquery+json 无刷新分页

MVC3 数据分页 ASP.NET实现无刷新分页实例

ASP+jQuery+JSON无刷新加载更多内容

最新资源