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. hashmap理解总结

    1.hashmap是通过存放对象的hash算法进行对象的存储的,其查询,put,get方法均是. 所以将对象存储进hashmap,set啥时候,要重写hashcode方法. 2.hash算法存储,查询 ...

  2. HTML Meta标签详解

    HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用?主题 HTML X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不 ...

  3. 276. Paint Fence

    题目: There is a fence with n posts, each post can be painted with one of the k colors. You have to pa ...

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

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

  5. Sql server cast(as nvarchar) 默认长度问题

    Sql server 在我的SQL语句中:sql=".........cast(ziduan as nvarchar) ..............." 这样之后,ziduan被转 ...

  6. spring路径通配符

    在应用Spring的工程中,使用class path的方式加载配置文件应该是最常用的做法,然而对大部分人来说,刚开始使用Spring时,几乎都碰到过加载配置文件失败的情况,除了配置上的错误外,很多时候 ...

  7. svn服务器及客户端安装使用

    一.服务器安装: 1.yum install subversion   2.输入rpm -ql subversion查看安装位置,如下图:   我们知道svn在bin目录下生成了几个二进制文件. 输入 ...

  8. .Net MVC视图

    1.View显示 return View(): 默认为/Views/<控制器>/<方法> return View("Test"); 显示/View/< ...

  9. box-sizing的学习和认识

    先上自己写的DEMO代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  10. android利用数字证书对程序签名

     签名的必要性 1.  防止你已安装的应用被恶意的第三方覆盖或替换掉. 2.  开发者的身份标识,签名可以防止抵赖等事件的发生. 开发Android的人这么多,完全有可能大家都把类名,包名起成了一个同 ...