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 相关文章推荐
详细讲解JS节点知识
Jan 31 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
js实现select跳转功能代码
Oct 22 Javascript
深入浅析react native es6语法
Dec 09 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
vue3不同环境下实现配置代理
May 25 Vue.js
让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
人族 TERRAN 概述
2020/03/14 星际争霸
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
浅谈javascript 面向对象编程
2009/10/28 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
nodejs基础知识
2017/02/03 NodeJs
jquery实现图片上传前本地预览
2017/04/28 jQuery
angular ng-click防止重复提交实例
2017/06/16 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
Python使用gensim计算文档相似性
2016/04/10 Python
Python中进程和线程的区别详解
2017/10/29 Python
python使用正则筛选信用卡
2019/01/27 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
python如何制作英文字典
2019/06/25 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
南京软件公司的.net程序员笔试题
2014/08/31 面试题
个人能力自我鉴赏
2014/01/25 职场文书
社区交通安全实施方案
2014/03/22 职场文书
环保倡议书怎么写
2014/05/16 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
2014年团支书工作总结
2014/11/14 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
会议营销主持词
2015/07/03 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android