jquery pagination插件实现无刷新分页代码


Posted in Javascript onOctober 13, 2009

先把要用到的文件依次进入进来:

<script src="common/jquery.js" type="text/javascript"></script> 
<script src="common/jquery.pagination.js" type="text/javascript"></script> 
<link href="common/tablesorter.css" rel="stylesheet" type="text/css" /> 
<link href="common/pagination.css" rel="stylesheet" type="text/css" />

接着在页面的body里面写入如下的代码,在这里强调一下呈现出来的数据是没有进行控件绑定的,完全是由简单的table来呈现数据的,先看一下页面代码
<div> 
<table id="linkTable" cellpadding="6" cellspacing="1" align="left" class="tablesorter" style="width:400px;margin:0 0 20px 5px;"> 
<thead> 
<tr class="tableHeader" align="center"> 
<th style="width:200px; text-align:center;" > 
产品名称 
</th> 
<th style="width:200px; text-align:center"> 
产品单价 
</th> 
</tr> 
</thead> 
</table> 
</div> 
<div id="Pagination" class="digg"></div>

我们先分析一下代码,很明显我们设定了一个标准的带有<thead>的表格,然后再加上了我们使用到的Jquery的插件—Paination,在这里我们只需定义一下一个以id为Pagination的层就可以了。页面的代码我们分析到这里,下面就来看一下关键的js代码
<script language="javascript" type="text/javascript"> 
var orderby = ""; //进行排序的依据 
$(document).ready(function() { 
InitData(0); //初始化数据 
}); 
//这个事件是在翻页时候用的 
function pageselectCallback(page_id, jq) { 
InitData(page_id); 
} 
function InitData(pageIndex) { 
var tbody = ""; //声明表格中body部分 
$.ajax({ //这里使用到Jquery的ajax方法,具体使用在这里不详细叙述 
type: "POST", 
dataType: "json", 
url: '/DataListWeb/WebService/GetData.ashx', //请求的处理数据 
data: "pageIndex=" + (pageIndex + 1) + "&sortType=" + orderby, 
//传入的参数,第一个参数就是分页的页数,第二个参数为排序的依据 
//下面的操作就是成功返回数据以后,进行数据的绑定 
success: function(data) { 
$("#linkTable tr:gt(0)").remove(); 
var myData = data.Products; 
$.each(myData, function(i, n) { 
var trs = ""; 
trs += "<tr><td align='center'>" + n.ProductName + "</td><td>" + n.QuantityPerUnit + "</td></tr>"; 
tbody += trs; 
}); 
$("#linkTable").append(tbody); 
} 
}); 
//加入分页的绑定 
$("#Pagination").pagination(<%=pageCount %>, { 
callback: pageselectCallback, 
prev_text: '< 上一页', 
next_text: '下一页 >', 
items_per_page: 20, 
num_display_entries: 6, 
current_page: pageIndex, 
num_edge_entries: 2 
}); 
} 
</script>

这样我们页面所要进行的操作就完成了,注释都写入上面了,如果有什么看不明白的,可以联系我哦。下面我就要看看关键的GetData.ashx是如何进行数据操作的,在这里先提示一下,我是用到了SqlHelper类进行sql语句操作的,再辅以分页的存储过程,然后又用到Json.NET,将从数据库得到的数据转换成json,现在发现json真是个好东西的,操作起来比较简便。废话不多说了呈上代码,代码还是有说服力的。虽然写得比较简单。
string strConn = ConfigurationManager.AppSettings["ConnectionString"]; 
//具体的页面数 
int pageIndex;     
int.TryParse(context.Request["pageIndex"], out pageIndex); 
//排序的依据 
string orderType = "ProductID"; 
int sortType = 1; 
if (!string.IsNullOrEmpty(context.Request["sortType"])) 
{ 
string[] strArr = context.Request["sortType"].Split('_'); 
if (strArr[1] == "0") 
{ 
orderType = strArr[0]; 
sortType = 0; 
} 
else 
{ 
orderType = strArr[0]; 
sortType = 1; 
} 
} 
if (pageIndex == 0) 
{ 
pageIndex = 1; 
} 
//下面就是分页的存储过程了,把相应的参数传进去就可以了。 
System.Data.SqlClient.SqlParameter[] p = 
{ 
SqlHelper.MakeOutParam("@Counts", SqlDbType.Int, 4), 
SqlHelper.MakeInParam("@tblName", SqlDbType.VarChar, 128, "Products"), 
SqlHelper.MakeInParam("@strGetFields", SqlDbType.VarChar,200, "ProductName,QuantityPerUnit"), 
SqlHelper.MakeInParam("@fldName", SqlDbType.VarChar, 128, orderType), 
SqlHelper.MakeInParam("@PageSize", SqlDbType.Int, 4, 20), 
SqlHelper.MakeInParam("@PageIndex", SqlDbType.Int, 1, pageIndex), 
SqlHelper.MakeInParam("@OrderType", SqlDbType.Bit, 1, sortType), 
SqlHelper.MakeInParam("@strWhere", SqlDbType.VarChar, 1500, "") 
}; 
DataTable dt = SqlHelper.ExecuteDataset(strConn, CommandType.StoredProcedure, "sp_PageCut", p).Tables[0]; 
int pageCount = Convert.ToInt32(p[0].Value.ToString()); 
//将得到的数据转换成json 
context.Response.Write(Util.DataTableToJSON(dt, "Products", pageCount)); 
下面我们看看DataTableToJson这个方法的代码,这个比较简单,我也是看它的帮助文档写出来的,代码的详细说明就不说了。 public static string DataTableToJSON(DataTable dt, string tableName, int pageCount) 
{ 
StringBuilder sb = new StringBuilder(); 
StringWriter sw = new StringWriter(sb); 
using (JsonWriter jw = new JsonTextWriter(sw)) 
{ 
JsonSerializer ser = new JsonSerializer(); 
jw.WriteStartObject(); 
jw.WritePropertyName(tableName); 
jw.WriteStartArray(); 
#region TableName属性 
foreach (DataRow dr in dt.Rows) 
{ 
jw.WriteStartObject(); 
foreach (DataColumn dc in dt.Columns) 
{ 
jw.WritePropertyName(dc.ColumnName); 
ser.Serialize(jw, dr[dc].ToString()); 
} 
jw.WriteEndObject(); 
} 
#endregion 
jw.WriteEndArray(); 
jw.WriteEndObject(); 
sw.Close(); 
jw.Close(); 
} 
return sb.ToString(); 
}

这样我们的工作基本上就完成了,声明绑定的table,然后在服务端获取数据,再把得到的数据转化成json,在页面里面将数据绑定完成,一气呵成真是不错,看得呈现的数据心里比较美吧,不过这个时候你也许会发现,页面怎么只用一页呢,嘻嘻,别忘了一点---就是取出数据的总数,用过分页的都知道,是根据记录的总数来计算到底有多少页的哦。那么我们该怎么做呢?

其实比较简单哦,在页面的Page_Load中得到数据的总数就可以了,然后将其进行数据绑定,不信你去看看前面的代码,是不是有句

$("#Pagination").pagination(<%=pageCount %>这个就是起到了记录总数的作用。 
if (!IsPostBack) 
{ 
SqlParameter[] p = 
{ 
SqlHelper.MakeOutParam("@Counts", SqlDbType.Int, 4), 
SqlHelper.MakeInParam("@tblName", SqlDbType.VarChar, 128, "Products"), 
SqlHelper.MakeInParam("@strGetFields", SqlDbType.VarChar,200, "*"), 
SqlHelper.MakeInParam("@fldName", SqlDbType.VarChar, 128, "ProductID"), 
SqlHelper.MakeInParam("@PageSize", SqlDbType.Int, 4, 20), 
SqlHelper.MakeInParam("@PageIndex", SqlDbType.Int, 1, 1), 
SqlHelper.MakeInParam("@OrderType", SqlDbType.Bit, 1, 0), 
SqlHelper.MakeInParam("@strWhere", SqlDbType.VarChar, 1500, "") 
}; 
DataTable dt = SqlHelper.ExecuteDataset(conn, CommandType.StoredProcedure, "sp_PageCut", p).Tables[0]; 
pageCount = Convert.ToInt32(p[0].Value.ToString()); 
}

至此,整篇介绍如何利用jquery的插件---pagination进行分页就介绍到这里,简单的回顾一下就是声明绑定的table,利用jquery的ajax方法进行数据绑定的,然后在后台得到数据转换为json,整个流程就是这样的,也许你会觉得这样做比较繁琐,不知你有何高见,可以在下面的评论为我点出,我不胜感激哦。^_^。写博客真的是一件挺费神的事情,不过在写的过程中,又让自己巩固了一下这些知识,也是很不错的。就请各位看官评论吧。

经过请教了美工了,把页面中分页的效果做成了gif图片,大家看看图吧。
jquery pagination插件实现无刷新分页代码

Javascript 相关文章推荐
chrome原生方法之数组
Nov 30 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 #Javascript
百度留言本js 大家可以参考下
Oct 13 #Javascript
javascript hashtable实现代码
Oct 13 #Javascript
JavaScript 核心参考教程 内置对象
Oct 13 #Javascript
jQuery Ajax之load()方法
Oct 12 #Javascript
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 #Javascript
JS 文件本身编码转换 图文教程
Oct 12 #Javascript
You might like
PHP常用函数小技巧
2008/09/11 PHP
使用php来实现网络服务
2009/09/15 PHP
php的ajax简单实例
2014/02/27 PHP
php url路由入门实例
2014/04/23 PHP
微信支付的开发流程详解
2016/09/13 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
python批量处理txt文件的实例代码
2020/01/13 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
JPA面试常见问题
2016/11/14 面试题
交通事故调解协议书
2014/04/16 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
信息管理专业自荐书
2014/06/05 职场文书
培训科主任岗位职责
2014/08/08 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
服务员态度差检讨书
2014/10/28 职场文书
小学班主任研修日志
2015/11/13 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python