Web开发,分页在所难免的,微软GridView、AspPager等设置分页数据可以自动分页,但是这里浏览器会闪动,用户体验不是很友好,在此我整理了JQuery实现分页,并且使用

JQuery模板显示数据,用户体验很友好

项目结构:

jquery.tools.pack.js是Jquery数据显示模板

Default.aspx显示分页数据,Member_Ajax.aspx是将数据已JSON格式输出到页面,PageBar.cs分页工具条,Student.cs实体类

首先Default.aspx页面需要引用的JS文件

JQuery采用 1.4.1.1 下载地址:http://pan.baidu.com/share/link?shareid=3024434948&uk=2920032010

JQuery数据显示模板JS 下载地址:http://pan.baidu.com/share/link?shareid=3030793948&uk=2920032010

分页按钮样式 下载地址:http://pan.baidu.com/share/link?shareid=3146737028&uk=2920032010

Default.aspx页面js代码,如下,每页条数可以自定义,也可以放置配置文件中,queryString函数是根据URL参数名称,获取参数的值

<script type="text/javascript">
var pagesize = ;
var page = thispage();
$(document).ready(function () {
ajaxList(page);
}); function queryString(pname) {
var query = location.search.substring();
var str = "";
params = query.split("&");
if (params.length > ) {
for (var n in params) {
var pairs = params[n].split("=");
if (pairs[] == pname) {
str = pairs[];
break;
}
}
}
return str;
} function thispage() {
var r = /^[-][-]*$/;
if (queryString('page') == '') return ;
if (r.test(queryString('page')))
return parseInt(queryString('page'));
else
return ;
} function ajaxList(currentpage) {
if (currentpage != null) page = currentpage;
$.ajax({
type: "get",//get类型,获取用QueryString方法,post类型,用Form获取传值
dataType: "json",
data: "pageIndex=" + currentpage + "&pagesize=" + pagesize + "&clienttt=" + Math.random(),
url: "Member_Ajax.aspx",
error: function (XmlHttpRequest, textStatus, errorThrown) { alert(XmlHttpRequest.responseText); },
success: function (d) {
switch (d.result) {
case '-1':
Alert(d.returnval);
break;
case '':
Alert(d.returnval);
break;
case '':
$("#ajaxList").setTemplateElement("tplList", null, { filter_data: true });
$("#ajaxList").processTemplate(d);
$("#ajaxPageBar").html(d.pagebar);
break;
}
}
});
} </script>

Default.aspx页面Form代码如下,页面数据使用JQuery jTemplates绑定数据,非常方便,只需设置JSON格式数据,引用JS文件即可

<textarea id="tplList" style="display: none">
<table class="cooltable" width="300px">
<thead>
<tr>
<th align="center" scope="col" style="width:30px;"><input onclick="checkAllLine()" id="checkedAll" name="checkedAll" type="checkbox" title="全部选择/全部不选" /></th>
<th scope="col" style="width:60px;">ID</th>
<th width="120px">姓名</th>
<th scope="col" width="60px">年龄</th> </tr>
</thead>
<tbody>
{#foreach $T.table as record}
<tr>
<td align="center">
<input class="checkbox" name="selectID" type="checkbox" value='{$T.record.MemberNo}' />
</td>
<td align="center">{$T.record.Id}</td>
<td align="left">
{$T.record.Name}
</td>
<td align="left">
{$T.record.Age}
</td>
</tr>
{#/for}
</tbody>
</table>
</textarea>
<div id="ajaxList" style="width:500px;">
</div><br />
<div id="ajaxPageBar" style="width:500px;">
</div>

$T.table.Id 中Id对应的是实体类Id属性,table是json格式中list集合名称

上面Javascript方法中用到Member_Ajax.aspx页面代码如下,注意:这里是将数据已JSON格式输出到页面,配合JQuery数据模板使用,所有Member_Ajax.aspx页面,不应该包含Html标签,其代码格式如下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Member_Ajax.aspx.cs" Inherits="Nick.Kuang.Web.Member_Ajax" %>

Member_Ajax.aspx cs页面代码

protected void Page_Load(object sender, EventArgs e)
{
Response.Write(GetAll());
} private string GetAll()
{
List<Student> list = new List<Student>(); for (int i = ; i < ; i++)
{
list.Add(new Student { Id = i, Name = "Name" + i, Age = i });
} int pageIndex = GetPage();
int pageSize = StrToInt(QueryString("pagesize"), ); ;
JavaScriptSerializer javascriptSerializer = new JavaScriptSerializer(); string result = javascriptSerializer.Serialize(list.Skip(pageSize * (pageIndex - )).Take(pageSize).ToList());
string response = "{\"result\" :\"1\"," +
"\"returnval\" :\"操作成功\"," +
"\"pagebar\" :\"" + PageBar.GetPageBar(, "js", , list.Count, pageSize, pageIndex, "javascript:ajaxList(<#page#>);") + "\"," +
"\"" + "totalCountStr" + "\":" + + ",\"" + "table" + "\":" + result +
"}";
return response;
} private static int GetPage()
{
int page = StrToInt(QueryString("pageIndex"), ) < ? : StrToInt(QueryString("pageIndex"), );
return page;
} private static int StrToInt(string value, int defaultValue)
{
if (IsNumeric(value))
return int.Parse(value);
else
return defaultValue;
} /// <summary>
/// 获取querystring
/// </summary>
/// <param name="s">参数名</param>
/// <returns>返回值</returns>
private static string QueryString(string s)
{
if (HttpContext.Current.Request.QueryString[s] != null && HttpContext.Current.Request.QueryString[s] != "")
{
return SafetyQueryS(HttpContext.Current.Request.QueryString[s].ToString());
}
return string.Empty;
} /// <summary>
/// 将字符串中的一些标签过滤
/// </summary>
/// <param name="theString"></param>
/// <returns></returns>
private static string SafetyQueryS(string theString)
{
string[] aryReg = { "'", ";", "\"", "\r", "\n", "<", ">" };
for (int i = ; i < aryReg.Length; i++)
{
theString = theString.Replace(aryReg[i], string.Empty);
}
return theString;
} private static bool IsNumeric(string value)
{
System.Text.RegularExpressions.Regex myRegex = new System.Text.RegularExpressions.Regex("^[-]?[1-9]*[0-9]*$");
if (value.Length == )
{
return false;
}
return myRegex.IsMatch(value);
}

使用JavaScriptSerializer中的Serialize方法可以将Object类型数据转换成JSON格式的数据,告别以前拼接成字串的方法

Student实体类代码属性

public class Student
{
public int Id { get; set; } public string Name { get; set; } public int Age { get; set; }
}

分页中用到的PageBar类代码,分页调用Default.aspx中ajaxList函数,实现无刷新分页

public class PageBar
{
/// <summary>
/// 完整模式:数字+上下页+首末+总记录信息+指定页码翻转
/// </summary>
/// <param name="stype"></param>
/// <param name="stepNum"></param>
/// <param name="pageRoot"></param>
/// <param name="pageFoot"></param>
/// <param name="countNum"></param>
/// <param name="currentPage"></param>
/// <param name="Http1"></param>
/// <param name="HttpM"></param>
/// <param name="HttpN"></param>
/// <param name="limitPage"></param>
/// <returns></returns>
private static string GetDetailbar(string stype, int stepNum, int pageRoot, int pageFoot, int pageCount, int countNum, int pageSize, int currentPage, string Http1, string HttpM, string HttpN, int limitPage)
{
StringBuilder sb = new StringBuilder();
sb.Append("<div class='p_btns'>");
//sb.Append("<span class='total_count'>共" + countNum.ToString() + "条,当前第" + currentPage.ToString() + "/" + pageCount.ToString() + "页&nbsp;&nbsp;&nbsp;</span>");
sb.Append("<span class='total_count'>共" + countNum.ToString() + "条记录/" + pageCount.ToString() + "页&nbsp;&nbsp;</span>");
if (countNum > pageSize)
{
if (currentPage != )//只要不是第一页
sb.Append("<a target='_self' href='" + GetPageUrl(currentPage - , Http1, HttpM, HttpN, limitPage) + "' title='上一页'>&laquo;</a>");
if (pageRoot > )
{
sb.Append("<a target='_self' href='" + GetPageUrl(, Http1, HttpM, HttpN, limitPage) + "'>1..</a>");
}
if (stepNum > )
{
for (int i = pageRoot; i <= pageFoot; i++)
{
if (i == currentPage)
sb.Append("<span class='currentpage'>" + i.ToString() + "</span>");
else
sb.Append("<a target='_self' href='" + GetPageUrl(i, Http1, HttpM, HttpN, limitPage) + "'>" + i.ToString() + "</a>");
if (i == pageCount)
break;
}
}
if (pageFoot < pageCount)
{
sb.Append("<a target='_self' href='" + GetPageUrl(pageCount, Http1, HttpM, HttpN, limitPage) + "'>.." + pageCount + "</a>"); }
if (currentPage != pageCount)//只要不是最后一页
sb.Append("<a target='_self' href='" + GetPageUrl(currentPage + , Http1, HttpM, HttpN, limitPage) + "' title='下一页'>&raquo;</a>");
if (stype == "html")
sb.Append("<span class='jumppage'>转到第 <input type='text' name='custompage' size='2' onkeyup=\"this.value=this.value.replace(/\\D/g,'')\" onafterpaste=\"this.value=this.value.replace(/\\D/g,'')\" onkeydown=\"if(event.keyCode==13) {window.location='" + HttpN + "'.replace('<#page#>',this.value); return false;}\" /> 页</span>");
}
sb.Append("</div>");
return sb.ToString();
} /// <summary>
/// 分页导航
/// </summary>
/// <param name="mode">支持1=simple,2=normal,3=full</param>
/// <param name="stype">html/js,只有当stype为html且mode为3的时候显示任意页的转向</param>
/// <param name="stepNum">步数,如果步数为i,则每页的数字导航就有2i+1</param>
/// <param name="countNum">记录总数</param>
/// <param name="pageSize">每页记录数</param>
/// <param name="currentPage">当前页码</param>
/// <param name="Http1">第1页的链接地址模板,支持js</param>
/// <param name="HttpM">第M页的链接地址模板,支持js,M不大于limitPage</param>
/// <param name="HttpN">第N页的链接地址模板,支持js,N大于limitPage</param>
/// <param name="limitPage"></param>
/// <returns></returns>
public static string GetPageBar(int mode, string stype, int stepNum, int countNum, int pageSize, int currentPage, string Http1, string HttpM, string HttpN, int limitPage)
{
string pagebar = "";
//if (countNum > pageSize)
//{
int pageCount = countNum % pageSize == ? countNum / pageSize : countNum / pageSize + ;
currentPage = currentPage > pageCount ? pageCount : currentPage;
currentPage = currentPage < ? : currentPage;
int stepageSize = stepNum * ;
int pageRoot = ;
int pageFoot = pageCount;
pageCount = pageCount == ? : pageCount;
if (pageCount - stepageSize < )//页数比较少
{
pageRoot = ;
pageFoot = pageCount;
}
else
{
pageRoot = currentPage - stepNum > ? currentPage - stepNum : ;
pageFoot = pageRoot + stepageSize > pageCount ? pageCount : pageRoot + stepageSize;
pageRoot = pageFoot - stepageSize < pageRoot ? pageFoot - stepageSize : pageRoot;
} pagebar = GetDetailbar(stype, stepNum, pageRoot, pageFoot, pageCount, countNum, pageSize, currentPage, Http1, HttpM, HttpN, limitPage); return pagebar;
} public static string GetPageBar(int mode, string stype, int stepNum, int countNum, int pageSize, int currentPage, string HttpN)
{
return GetPageBar(mode, stype, stepNum, countNum, pageSize, currentPage, HttpN, HttpN, HttpN, );
} public static string GetPageUrl(int chkPage, string Http1, string HttpM, string HttpN, int limitPage)
{
string Http = string.Empty;
if (chkPage == )
Http = Http1;
else
Http = (chkPage > limitPage || limitPage == ) ? HttpN : HttpM;
return Http.Replace("<#page#>", chkPage.ToString());
}
}

最后的效果是,如下图

代码基本上写好了,希望对大家有用,一起学习,一起进步

源码下载:http://pan.baidu.com/share/link?shareid=2604334191&uk=2920032010

JQuery实现分页程序代码,源码下载的更多相关文章

  1. 分享一组很赞的 jQuery 特效【附源码下载】

    作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些  ...

  2. 14款让前端开发者心动的jQuery/CSS3插件及源码

    14款让前端开发者心动的jQuery/CSS3插件及源码,一起来看看. 1.jQuery左右滚动banner代码! DEMO演示    /    源码下载 2.jQuery QQ表情插件qqFace ...

  3. 在网站开发中很有用的8个 jQuery 效果【附源码】

    jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...

  4. STM32例程之USB HID双向数据传输(源码下载)【转】

    程序功能 将STM32的USB枚举为HID设备. STM32使用3个端点,端点0用于枚举用,端点1和2用于数据的发送和接收. 端点长度为64,也就是单次最多可以传输64个字节数据. STM32获取上位 ...

  5. 10款jquery图片广告特效的预览及源码下载 改自[帅的相对论]

    原文格式有问题,我来排版了一下,分享给大家. 1.jQuery仿海尔官网全屏焦点图特效代码 Query仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效.当焦点图切换时,下方的三块 ...

  6. jquery省市区三级联动(数据来源国家统计局官网)内附源码下载

    很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项 ...

  7. 《编写高质量代码:改善C#程序的157个建议》源码下载

    ==== 目录 前 言第一部分 语言篇第1章 基本语言要素 / 2建议1:正确操作字符串 / 2建议2:使用默认转型方法 / 6建议3:区别对待强制转型与as和is / 9建议4:TryParse比P ...

  8. 9款精致HTML5/jQuery日历时钟控件源码下载(源码请见百度云) 链接:http://pan.baidu.com/s/1geIXe75 密码:7m4a

    现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这 ...

  9. 10款基于jquery的web前端特效及源码下载

    1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...

随机推荐

  1. JLink and JTAG等接口简介

    1.JTAG JTAG用的计算机的并口,JTAG也是一种国际标准测试协议(IEEE 1149.1兼容),主要用于芯片内部测试.现在多数的高级器件都支持JTAG协议,如DSP.FPGA器件等. 标准的J ...

  2. C++:主要几种排序算法及其复杂度

     常见排序算法稳定性和复杂度分析快速简记以及转载 分类: 算法 2012-02-07 22:18 399人阅读 评论(1) 收藏 举报 算法mergeshell http://blogold.chin ...

  3. 管理IPv4网络连接

    1. 使用 nmcli 检查所有连接 [root@desktop1 ~]# nmcli connection NAME UUID TYPE DEVICE eno33554960 5be7dba9-6b ...

  4. Mybatis Interceptor 拦截器原理 源码分析

    Mybatis采用责任链模式,通过动态代理组织多个拦截器(插件),通过这些拦截器可以改变Mybatis的默认行为(诸如SQL重写之类的),由于插件会深入到Mybatis的核心,因此在编写自己的插件前最 ...

  5. Windows Services windows域账户管理

    windows  域账户管理 一.什么是域账户: 域账户是域是网络对象的分组.例如:用户.组和计算机.域中所有的对象都存储在 Active Directory 下.Active Directory 可 ...

  6. git 创建branch分支【转】

    转自:http://www.cnblogs.com/jackluo/p/3499731.html 开发者user1 负责用getopt 进行命令解析的功能,因为这个功能用到getopt 函数,于是将这 ...

  7. MySQL:创建、修改和删除表

    其实对很多人来说对于SQL语句已经忘了很多,或者说是不懂很多,因为有数据库图形操作软件,方便了大家,但是我们不能忘记最根本的东西,特别是一些细节上的东西,可能你用惯了Hibernate,不用写SQL语 ...

  8. [原]HDU-1598-find the most comfortable road(暴力枚举+Kruskal最小生成树)

    题意: 给出一个图,然后Q个询问,每次询问从一个节点到另一个节点,联通图中的“最大边和最小边之差”的最小值,但如果节点之间不连通,则输出-1. 思路:由于询问Q < 11,m < 1000 ...

  9. How Uuencoding Works

    做题目学习  https://www.zhihu.com/question/26598476/answer/45396765 http://email.about.com/od/emailbehind ...

  10. jsonp获取服务器数据的方式

    jsonp获取服务器的数据,有两种 一,跨域 二,不跨域 如果跨域 js的写法有两种 1, <script type="text/javascript"> $(func ...