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 相关文章推荐
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
JS中substring与substr的用法
Nov 16 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
JavaScript交换两个变量方法实例
Nov 25 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
js模仿jquery的写法示例代码
2013/06/16 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
js中function()使用方法
2013/12/24 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
详解Python如何生成词云的方法
2018/06/01 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
如何用JQuery进行表单验证
2013/05/29 面试题
关于毕业的广播稿
2014/01/10 职场文书
十一酒店活动方案
2014/02/20 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
校运动会广播稿300字
2014/10/07 职场文书
房产分割协议书范文
2014/11/21 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
关于python中模块和重载的问题
2021/11/02 Python
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python