jquery.pagination.js 无刷新分页实现步骤分享


Posted in Javascript onMay 23, 2012

1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个。
首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css)。
2.页面js代码为

<script type="text/javascript"> 
var pageIndex = 0; //页面索引初始值 
var pageSize = 15; //每页显示条数初始化,修改显示条数,修改这里即可 
$(function () { 
InitTable(0); //Load事件,初始化表格数据,页面索引为0(第一页) 
//分页,PageCount是总条目数,这是必选参数,其它参数都是可选 
$("#Pagination").pagination(<%=pcount%>, { 
callback: PageCallback, //PageCallback() 为翻页调用次函数。 
prev_text: "« 上一页", 
next_text: "下一页 »", 
items_per_page:pageSize, 
num_edge_entries: 2, //两侧首尾分页条目数 
num_display_entries: 6, //连续分页主体部分分页条目数 
current_page: pageIndex, //当前页索引 
}); 
//翻页调用 
function PageCallback(index, jq) { 
InitTable(index); 
} 
//请求数据 
function InitTable(pageIndex) { 
$.ajax({ 
type: "POST", 
dataType: "text", 
url: 'https://3water.com/tool/Reserver/ManageBuyBatchManage.ashx', //提交到一般处理程序请求数据 
data: "pageIndex=" + (pageIndex) + "&pageSize=" + pageSize, //提交两个参数:pageIndex(页面索引),pageSize(显示条数) 
success: function(data) { 
$("#Result tr:gt(0)").remove(); //移除Id为Result的表格里的行,从第二行开始(这里根据页面布局不同页变) 
$("#Result").append(data); //将返回的数据追加到表格 
} 
}); 
} 
}); 
</script>

3.页面<body>里面的代码为
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="60" align="right">商品名:</td> 
<td width="200" align="left"><input type="text" id="txtKeywords" class="keyword" /></td> 
<td width="200" align="left"><input id="search" type="button" value=" 查 找 " class="submit" /></td> 
<td > </td> 
</tr> 
</table> 
<table id="Result" cellspacing="0" cellpadding="0"> 
<tr> 
<th>商品编号</th> 
<th>商品名称</th> 
</tr> 
</table> 
<div id="Pagination" class="right flickr"></div>

4.页面后台代码为
protected int pcount = 0; //总条数 
protected void Page_Load(object sender, EventArgs e) 
{ 
if (!IsPostBack) 
{ 
BLL.TbGoods bll = new BLL.TbGoods(); 
pcount = bll.GetRecordCount("Status='" + (int)Enum.RecordStatus.Normal + "'"); //获取页面总条数,即要现实的数据总条数,还不明白的话,就是select count(*)from Table ,就是这里的个数。 
} 
}

5.一般处理程序fffff.ashx代码为
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Text; 
using System.Data; 
namespace EShop.Web.Admin.tool.Reserver 
{ 
/// <summary> 
/// ListBuyBatchManage 的摘要说明 
/// </summary> 
public class ListBuyBatchManage : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
String str = string.Empty; 
if (context.Request["pageIndex"] != null && context.Request["pageIndex"].ToString().Length > 0) 
{ 
int pageIndex; //具体的页面数 
int.TryParse(context.Request["pageIndex"], out pageIndex); 
if(context.Request["pageSize"]!=null&&context.Request["pageSize"].ToString().Length > 0) 
{ 
//页面显示条数 
int size = Convert.ToInt32(context.Request["pageSize"]); 
string data= BindSource(size,pageIndex); 
context.Response.Write(data); 
context.Response.End(); 
} 
} 
} 
#region 无刷新分页 
public string BindSource(int pagesize,int page) 
{ 
BLL.TbGoods bll=new BLL.TbGoods(); 
DataSet ds = bll.GetListByPage("Status='" + (int)Enum.RecordStatus.Normal + "'", "", pagesize * page + 1, pagesize * (page + 1)); //获取数据源的ds会吧。 
StringBuilder sb = new StringBuilder(); 
if (ds!=null) 
{ 
foreach (DataRow row in ds.Tables[0].Rows) 
{ 
sb.Append("<tr><td>"); 
sb.Append(row["GoodsUid"]); 
sb.Append("</td><td>"); 
sb.Append(row["GoodsName"]); 
sb.Append("</td></tr>"); 
} 
} 
return sb.ToString(); 
} 
#endregion 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
} 
}

6.效果图
jquery.pagination.js 无刷新分页实现步骤分享
Javascript 相关文章推荐
通用JS事件写法实现代码
Jan 07 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 #Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 #Javascript
基于jquery tab切换(防止页面刷新)
May 23 #Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 #Javascript
js面向对象 多种创建对象方法小结
May 21 #Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 #Javascript
游览器中javascript的执行过程(图文)
May 20 #Javascript
You might like
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
python先序遍历二叉树问题
2017/11/10 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
python中使用while循环的实例
2019/08/05 Python
Python shutil模块用法实例分析
2019/10/02 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
python 回溯法模板详解
2020/02/26 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
建筑工程技术应届生自荐信
2013/09/27 职场文书
办公室副主任岗位职责
2013/11/25 职场文书
统计系教授推荐信
2014/02/28 职场文书
个人函授自我鉴定
2014/03/25 职场文书
护理专业自荐书
2014/06/04 职场文书
国际贸易求职信
2014/07/05 职场文书
银行招聘自荐信
2015/03/06 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
MySQL系列之十一 日志记录
2021/07/02 MySQL
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android
tree shaking对打包体积优化及作用
2022/07/07 Java/Android