Jquery+JSon 无刷新分页实现代码

2016-02-19 13:33 3 1 收藏

图老师小编精心整理的Jquery+JSon 无刷新分页实现代码希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

【 tulaoshi.com - Web开发 】

控件类代码:

代码如下:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Reflection;
using System.IO;
[assembly: WebResource("PageBarJS.js", "application/x-javascript")]
namespace Hawkon.Control {
[DefaultProperty("Text")]
[ToolboxData("{0}:PageBar runat=server/{0}:PageBar")]
public class PageBar : WebControl {
[Bindable(true)]
[Category("Data")]
[DefaultValue("1")]
[Localizable(true)]
public int PageIndex {
get {
return pageIndex;
}
set {
pageIndex = value;
}
}
private int pageIndex;
[Bindable(true)]
[Category("Data")]
[DefaultValue("1")]
[Localizable(true)]
public int PageCount {
get {
return pageCount;
}
set {
pageCount = value;
}
}
private int pageCount;
[Bindable(true)]
[Category("Data")]
[DefaultValue("5")]
[Localizable(true)]
public int DisplayCount {
get {
return displayCount;
}
set {
displayCount = value;
}
}
private int displayCount;
protected override void RenderContents(HtmlTextWriter output) {
string html = "";
html += CreateA(1, "");
int b = 0, e = 0;
if (pageIndex = displayCount) {
b = 1;
e = displayCount * 2 + 1;
}
else if (pageIndex pageCount - displayCount) {
b = pageCount - displayCount * 2;
e = pageCount;
}
else {
b = pageIndex - displayCount;
e = pageIndex + displayCount;
}
if (b = 1) {
html += CreateA(1, "");
}
else
html += CreateA(b - 1, "");
for (int i = b; i = e; i++) {
html += CreateA(i, i.ToString());
}
html += CreateA(e + 1, "");
html += CreateA(pageCount, "");
// html += string.Format("script src='{0}' type='text/javascript'/script",
// this.Page.ClientScript.GetWebResourceUrl(typeof(PageBar), "JScript1.js"));
output.Write(html);
}
private string CreateA(int pageIndex, string text) {
if (pageIndex == this.pageIndex) {
return string.Format("a class="pageA" title='页' id ="{0}"{1}/a ", pageIndex, text);
}
return string.Format("a class="pageA" title='页' href="#" id="{0}"{1}/a ", pageIndex, text);
}
protected override void OnPreRender(EventArgs e) {
base.OnPreRender(e);
string resourceName = "PageBarJS.js";
string url = this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "PageBarJS.js");
string script = "rnscript src="" + HttpUtility.HtmlAttributeEncode(url) + "" type="text/javascript"/script";
this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), resourceName, script, false);
script = @"script type=""text/javascript""$(document).ready(function() {InitPageBar(5, ""BookListByPage"", ""Books "", 50,""pageA"");});/script"; this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "ready", script);
}
protected override void Render(HtmlTextWriter writer) {
base.Render(writer);
}
}
}

JS资源文件代码:

代码如下:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
var displayCount;
var getDataUrl;
var bookTableId;
var currentIndex;
var pageCount;
var linkClass;
var fields;
function InitPageBar(dc, gdu, btId,pc,lc) {
displayCount = dc;
getDataUrl = gdu;
bookTableId = btId;
currentIndex = 1;
pageCount = pc;
linkClass = "."+lc;
$(linkClass).click(GetPage);
}
function GetPageById(id) {
$("#CI").val(id);
var surl = getDataUrl+"?pageIndex=" + id;
$.ajax({
url: surl,
type: "GET",
dataType: "json",
timeout: 1000,
success: showResult
}
);
}
function GetPage() {
GetPageById($(this).get(0).id);
}
function showResult(result) {
for (i = 1; i = result.Data.length; i++) {
var id = "#" + bookTableId + " tr:nth-child(" + i + ")";
obj = result.Data[i - 1];
for (var key in obj) {
ctl = $(id).find("." + key);
if (ctl.length 0) {
ctl.get(0).innerHTML = obj[key];
}
}
}
$(linkClass).each(function(index) {
var i, b, e;
if (result.CurrentPageIndex = displayCount) {
b = 1;
e = (displayCount + 1) * 2;
i = index - 2 + 1;
}
else if (result.CurrentPageIndex pageCount - displayCount) {
b = pageCount - displayCount * 2;
e = pageCount;
i = pageCount - displayCount * 2 + index - 2;
}
else {
i = result.CurrentPageIndex - displayCount + index - 2;
b = result.CurrentPageIndex - displayCount - 1;
e = result.CurrentPageIndex + displayCount + 1;
}
if ($(this).get(0).id == $(this).text()) {
$(this).text(i);
}
else if (index == 1) {
if (b = 1) {
$(this).get(0).id = 1;
}
else {
$(this).get(0).id = b - 1;
}
}
else if (index == displayCount * 2 + 3) {
$(this).get(0).id = e;
}
$(this).attr("href", "#");
if ((i = b) && (i = e)) {
$(this).get(0).id = i;
}
if ($(this).text == result.CurrentPageIndex) {
$(this).removeAttr("href");
}
});
currentIndex = result.CurrentPageIndex;
}

HTML页面代码:

代码如下:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
form runat="server"
div
asp:Repeater runat="server"
HeaderTemplate
table width="90%" cellspacing="0"
tr
th
书名
/th
th
作者
/th
th
类别
/th
th width="30px"
/th
th width="30px"
/th
/tr
tbody
tr
/HeaderTemplate
ItemTemplate
td
%# Eval("Title") %
/td
td
%# Eval("Author") %
/td
td
%# Eval("Categories.Name")%
/td
td
a href="#" id='%# Eval("Id") %'删除/a
/td
td
a href='BookDetail/%# Eval("Id") %'详细/a
/td
/ItemTemplate
SeparatorTemplate
/trtr
/SeparatorTemplate
FooterTemplate
/tr/tbody
tr
td colspan="3"
cc1:PageBar runat="server" PageCount="100" DisplayCount="5" PageIndex="1" /
input type="text" id = "CI" /
/td
/td
/tr
/table
/FooterTemplate
/asp:Repeater
/div
/form

Ajax请求地址返回的JSON数据:

代码如下:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
{"Data":[{"Title":"C#.NET程序设计——国外计算机科学经典教材","CategoryName":".NET","Author":"布拉德利(Bradley,J.C.),米尔斯波(Millspaugh,A.C.) 著, 天宏工作室 译","Id":5392},{"Title":"C#2.0〔宝典)(附盘)","CategoryName":"C C++ VC VC++","Author":"张立 编著","Id":5027},{"Title":"C#2.0完全自学手册(附CD)","CategoryName":"C C++ VC VC++","Author":"张立 等编著","Id":5081},{"Title":"C#2005数据库编程经典教程","CategoryName":"C C++ VC VC++","Author":"(美)沃顿(Karli watton) 著,陈秋萍 译","Id":4983},{"Title":"C#程序设计教程——计算机基础课程系列教材","CategoryName":"C C++ VC VC++","Author":"郑阿奇,梁敬东 主编","Id":5127},{"Title":"C#程序员参考手册","CategoryName":"C C++ VC VC++","Author":"Grant Palmer 著,康博 译","Id":5132},{"Title":"C#和.NET核心技术——开发人员专业技术丛书","CategoryName":"C C++ VC VC++","Author":"(美)佩里(Perry,S.C.) 著,肖斌 等译","Id":5104},{"Title":"C#基础与实例教程(附CD-ROM光盘一张)","CategoryName":"C C++ VC VC++","Author":"郝春强 编著","Id":5071},{"Title":"C#软件项目开发全程剖析","CategoryName":"C C++ VC VC++","Author":"(德)侯姆,(德)克鲁格,(德)斯普达 著,薛兴涛,袁勤勇 译","Id":5034},{"Title":"C#设计模式——开发大师系列","CategoryName":"C C++ VC VC++","Author":"(美)麦斯科 著,颜炯 译","Id":4954}],"CurrentPageIndex":15,"PageCount":1074}

来源:http://www.tulaoshi.com/n/20160219/1604604.html

延伸阅读
标签: Web开发
代码如下: var boardDiv = "div style='background:white;width:100%;height:100%;z-index:999;position:absolute;top:0;margin-top:100px;'加载中...\/div"; $(window).load(function(){ //window.alert("ok"); $(document.body).append(boardDiv); });
标签: Web开发
代码如下: script type="text/javascript" src="js/jquery.min.js"/script script type="text/javascript" $(function(){ $("li").hover(function(){ $(this).addClass("ho"); }, function(){ $(this).removeClass("ho"); }); $("li").click(function(){ $(this).removeClass("ho").addClass("xiaoshi").siblings().removeClass("x...
标签: Web开发
打包下载 理由:jquery简单,兼容性好且容易封装。废话不多说,马上开始我们的Jquery插件编写吧。应该有很多人写过类似的插件,我也是有些模仿flexGrid的形式。 需求:GridView显示数据,无刷新分页,无刷新排序,无刷新过滤(搜索数据),基于ASP.NET(我们这里有ashx一般处理文件来实现)。 使用到技术:asp.net2.0, jquery,css 首先写...
标签: Web开发
其中有mask()和unmask()这两个方法,这两个方法在指定的元素上添加一个遮罩层和一个提示消息实现,增加客户体验。由于最近做项目的时候,发现有时为了使用这一两个方法需要引入一个比较“庞大”的Extjs进来,觉得有点不划算,于是自己用jquery实现了一个比较简单mask、unmask方法来实现该效果。大家知道jquery是一个优秀的javascript框架,不但...
标签: Web开发
1.jqury如何用ajax的形式调用后台asp.net页面生成的json数据 2.jquery简单的dom操作 3.送本jquery的开发手册给大家(大家慢慢去研究) 准备工作: 首先,我们新建个网站(.net2.0就行). 1.在我们的项目中jquery的js文件。 2.新建一个htm文件,命名为dome.htm吧。 代码如下:(head区的js代码就是实现的全部代码,有详细注释) 代...

经验教程

395

收藏

80
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部