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 相关文章推荐
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
Vue实现购物车基本功能
Nov 08 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使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
js 深拷贝函数
2008/12/04 Javascript
广告切换效果(缓动切换)
2009/05/27 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
Vue中封装input组件的实例详解
2017/10/17 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
c++生成dll使用python调用dll的方法
2014/01/20 Python
Python 3.x 新特性及10大变化
2015/06/12 Python
Saltstack快速入门简单汇总
2016/03/01 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
美德好少年事迹材料
2014/01/19 职场文书
领导干部考察材料
2014/02/08 职场文书
校庆筹备方案
2014/03/30 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
捐助倡议书
2015/01/19 职场文书
个人求职自荐信范文
2015/03/06 职场文书
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫