asp.net jquery无刷新分页插件(jquery.pagination.js)
更新时间：2021年9月22日 10:17 点击：1928
采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果
友情提示：本示例Handler中采用StringBuilder的append方法追加HTML，小数据量可以，但是大数据或是布局常变，建议返回JSON格式的数据，性能和灵活性更好！
1.插件参数列表
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Porschev----无刷新翻页</title>
<script src="Script/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Script/jquery.pagination.js" type="text/javascript"></script>
<script src="Script/tablecloth.js" type="text/javascript"></script>
<link href="Style/tablecloth.css" rel="stylesheet" type="text/css"/>
<link href="Style/pagination.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
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: "text",
url: 'Handler/PagerHandler.ashx', //提交到一般处理程序请求数据
data: "pageIndex="+ (pageIndex +1) +"&pageSize="+ pageSize, //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)
success: function(data) {
$("#Result tr:gt(0)").remove(); //移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）
$("#Result").append(data); //将返回的数据追加到表格
}
});
}
});
</script>
</head>
<body>
<div align="center">
<h1>Posrchev----无刷新分页</h1>
</div>
<div id="container">
<table id="Result" cellspacing="0" cellpadding="0">
<tr>
<th>编号</th>
<th>名称</th>
</tr>
</table>
<div id="Pagination"></div>
</div>
</body>
</html>
3.页面.cs文件内容：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
public string pageCount = string.Empty; //总条目数
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
pageCount = new PagerTestBLL.PersonManager().GetPersonCount().ToString();
}
}
}
4.Handler中的内容：
<%@ WebHandler Language="C#" Class="PagerHandler" %>
using System;
using System.Web;
using System.Collections.Generic;
using System.Text;
public class PagerHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string str = string.Empty;
//具体的页面数
int pageIndex;
int.TryParse(context.Request["pageIndex"], out pageIndex);
//页面显示条数
int size = Convert.ToInt32(context.Request["pageSize"]);
if (pageIndex == 0)
{
pageIndex = 1;
}
int count;
List<PagerTestModels.Person> list = new PagerTestBLL.PersonManager().GetAllPerson(size, pageIndex, "", out count);
StringBuilder sb = new StringBuilder();
foreach (PagerTestModels.Person p in list)
{
sb.Append("<tr><td>");
sb.Append(p.Id.ToString());
sb.Append("</td><td>");
sb.Append(p.Name);
sb.Append("</td></tr>");
}
str = sb.ToString();
context.Response.Write(str);
}
public bool IsReusable {
get {
return false;
}
}
}
5.实现效果图：
源码下载
友情提示：本示例Handler中采用StringBuilder的append方法追加HTML，小数据量可以，但是大数据或是布局常变，建议返回JSON格式的数据，性能和灵活性更好！
1.插件参数列表
2.页面内容：
复制代码 代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Porschev----无刷新翻页</title>
<script src="Script/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Script/jquery.pagination.js" type="text/javascript"></script>
<script src="Script/tablecloth.js" type="text/javascript"></script>
<link href="Style/tablecloth.css" rel="stylesheet" type="text/css"/>
<link href="Style/pagination.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
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: "text",
url: 'Handler/PagerHandler.ashx', //提交到一般处理程序请求数据
data: "pageIndex="+ (pageIndex +1) +"&pageSize="+ pageSize, //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)
success: function(data) {
$("#Result tr:gt(0)").remove(); //移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）
$("#Result").append(data); //将返回的数据追加到表格
}
});
}
});
</script>
</head>
<body>
<div align="center">
<h1>Posrchev----无刷新分页</h1>
</div>
<div id="container">
<table id="Result" cellspacing="0" cellpadding="0">
<tr>
<th>编号</th>
<th>名称</th>
</tr>
</table>
<div id="Pagination"></div>
</div>
</body>
</html>
3.页面.cs文件内容：
复制代码 代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
public string pageCount = string.Empty; //总条目数
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
pageCount = new PagerTestBLL.PersonManager().GetPersonCount().ToString();
}
}
}
4.Handler中的内容：
复制代码 代码如下:
<%@ WebHandler Language="C#" Class="PagerHandler" %>
using System;
using System.Web;
using System.Collections.Generic;
using System.Text;
public class PagerHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string str = string.Empty;
//具体的页面数
int pageIndex;
int.TryParse(context.Request["pageIndex"], out pageIndex);
//页面显示条数
int size = Convert.ToInt32(context.Request["pageSize"]);
if (pageIndex == 0)
{
pageIndex = 1;
}
int count;
List<PagerTestModels.Person> list = new PagerTestBLL.PersonManager().GetAllPerson(size, pageIndex, "", out count);
StringBuilder sb = new StringBuilder();
foreach (PagerTestModels.Person p in list)
{
sb.Append("<tr><td>");
sb.Append(p.Id.ToString());
sb.Append("</td><td>");
sb.Append(p.Name);
sb.Append("</td></tr>");
}
str = sb.ToString();
context.Response.Write(str);
}
public bool IsReusable {
get {
return false;
}
}
}
5.实现效果图：
源码下载
相关文章
php无刷新利用iframe实现页面无刷新上传文件(1/2)
利用form表单的target属性和iframe 一、上传文件的一个php教程方法。 该方法接受一个$file参数，该参数为从客户端获取的$_files变量，返回重新命名后的文件名，如果上传失...2016-11-25jQuery+PHP发布的内容进行无刷新分页（Fckeditor）
这篇文章将使用jQuery，并结合PHP，将Fckeditor发布的内容进行分页，并且实现无刷新切换页面。 本文假设你是WEB开发人员，掌握了jQuery和PHP相关知识，并且熟知Fckeditor的配置和使用。...2015-10-23- 一个简单的jQuery分页插件，兼容AMD规范和requireJS./** * jQuery分页插件 * */;(function (factory) { if (typeof define === "function" && define.amd) { // AMD模式 define([ "jquery" ], factory); } els...2015-11-08
- 本文就是和大家分享一款由php结合ajax实现的无刷新留言板，先给大家看一下最后的效果图：数据库连接代码如下： <?php$conn = @mysql_connect("localhost","root","root") or die ("MySql连接错误");mysql_select_db("d...2015-10-30
- 这篇文章主要介绍了基于jquery实现表格无刷新分页，功能实现了前端排序功能，增加了前端搜索功能，感兴趣的小伙伴们可以参考一下...2016-01-08
jquery pagination分页插件使用详解（后台struts2）
这篇文章主要为大家详细介绍了jquery pagination 分页插件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 ...2017-01-26- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1...2016-11-25
- 其它原理很简单，利用form表单的target属性和iframe来实现的，打开为iframe试就行了，返回就利用js判断php教程运行后返回的参数是不是成功 一、上传文件的一个php方法。...2016-11-25
- iframe无刷新文件上传其实就是在当前页面打开了上传程序的页面，有点像ajax局部刷新一个，只是我们把它放到了iframe页面中上传，同时我们把iframe页面给隐藏了。 一个...2016-11-25
- 本文章简单的介绍了二种关于php ajax实现无刷新检测用户名是否可用，有我是利用了jquery的$.ajax来实例，有需要的朋友可以参考一下本实例。 前 言...2016-11-25
- 本文介绍了一款无刷新的新闻留言系统，最简明易懂的一个ajax无刷新留言系统，源码中省略了接受数据验证的过程，大家可根据自己的需求进行扩展，下面进入主题。核心源码：1.配置文件:config.php,代码如下：<?php //数据库配...2015-10-30
- 本文章来给大家介绍一个原生态的ajax+php无刷新回贴和注册检验实例，如果你对此有兴趣不防进入参考哦。 先看xin.sql数据库，我们可直接复制保存成xxx.sql哦。 ...2016-11-25
- 主题皮肤切换功能在很多网站和系统中应用，用户可以根据此功能设置自己喜欢的主题颜色风格，增强了用户体验。本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能。实现该功能的原理就是通过点击定义的主题样式，改变...2015-10-23
- <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/...2016-11-25
- ajax.net +jquery 无刷新三级联动的实例代码，需要的朋友可以参考一下...2021-09-22
ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例
下面小编就为大家分享一篇ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-09-22- 在静态HTM页面中实现无刷新的更换CSS样式！ 系统原来的更换CSS模板是要重新刷新一下儿页面的，我一直都对这个功能很不满意，百分之九十五的功能都用AJAX...2017-07-06
- 在这里上传图片就需要用到ajax无刷新上传图片，这里面包含的东西不是一点半点。这里用到的是一个插件swfupload实现无刷新上传图片，感兴趣的朋友可以参考下哈...2021-09-22
- 这篇文章主要为大家详细介绍了基于jquery编写分页插件的相关资料，感兴趣的小伙伴们可以参考一下...2016-03-09
- 这是一款基于jquery Ajax实现文件无刷新上传文件例子，下面我们一起来看看吧，希望例子能帮助到各位同学哦。 PHP + jQuery Ajax文件上传实例。因为看到一些朋友询问...2016-11-25