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 相关文章推荐
jQuery DOM操作实例
Mar 05 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
php中rename函数用法分析
2014/11/15 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
js实现拖拽功能
2017/03/01 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
Django中使用Celery的方法示例
2018/11/29 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
python3实现飞机大战
2020/11/29 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
优秀的教师个人的中文求职信
2013/09/21 职场文书
七年级数学教学反思
2014/01/22 职场文书
书法大赛策划方案
2014/06/04 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
《叶问2》观后感
2015/06/15 职场文书
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL