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. 老是出现dispolse 找不到合适的方法来重写

    复制到输出目录:不复制 生成操作:编译

  2. FMX的综合评价

    Cliff: 我个人觉得FMX值得学,因为可以做Mac软件,可以做Windows下的DirectUI,可以开发iOS/Android,而且是可视化开发,可利用RTL一切函数,包括可使用所有非可视控件. ...

  3. Find K most Frequent items in array

    给定一个String数组,求K个出现最频繁的数. 记录一下查到的资料和思路: 1. 使用heap sorting, 先用hashmap求出单词和词频.需要额外建立一个class Node,把单词和词频 ...

  4. 289. Game of Life

    题目: According to the Wikipedia's article: "The Game of Life, also known simply as Life, is a ce ...

  5. Linux任务前后台的切换

    Shell支持作用控制,有以下命令实现前后台切换: 1. command& 让进程在后台运行 2. jobs 查看后台运行的进程 3. fg %n 让后台运行的进程n到前台来 4. bg %n ...

  6. JavaScript获取DOM元素位置和尺寸大小

      在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...

  7. Oracle Demo ->> CREATE TABLE

    Demo One CREATE TABLE employees_demo ( employee_id ) , first_name ) , last_name ) CONSTRAINT emp_las ...

  8. Socket基础编程

    地址结构sockaddr_in 其中包含:IP地址,端口号,协议族推荐使用sockaddr_in,而不建议使用sockaddrsockaddr_in与sockaddr是等价的,但sockaddr_in ...

  9. git 使用(二)

    之前写过一篇git使用(一),那是入门篇,现在的(二)可以说是进阶篇吧,主要讲一些使用过程的注意事件及相关问题的解决办法. 一.push和fetch还需要输入用户名和密码? 解决办法:看看公玥是否添加 ...

  10. How Uuencoding Works

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