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 相关文章推荐
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 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生成带有雪花背景的验证码
2006/10/09 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
PHP类的反射用法实例
2014/11/03 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
layui的select联动实现代码
2019/09/28 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python OpenCV获取视频的方法
2018/02/28 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
.NET程序员的几道面试题
2012/06/01 面试题
高级工程师岗位职责
2013/12/15 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
立案决定书范文
2015/06/24 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python