手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >Jquery+JSon 无刷新分页实现代码
Jquery+JSon 无刷新分页实现代码
摘要:控件类代码:复制代码代码如下:usingSystem;usingSystem.Collections.Generic;usingSystem...

控件类代码:

复制代码 代码如下:

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 title='页' id ="{0}">{1}</a>", pageIndex, text);

}

return string.Format("<a 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 = "rn<script 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资源文件代码:

复制代码 代码如下:

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页面代码:

复制代码 代码如下:

<form runat="server" id="form1">

<div>

<asp:Repeater ID="rptBooks" runat="server">

<HeaderTemplate>

<table id="Books" width="90%" cellspacing="0">

<tr>

<th>

书名

</th>

<th>

作者

</th>

<th>

类别

</th>

<th width="30px">

</th>

<th width="30px">

</th>

</tr>

<tbody id="Data">

<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>

</tr><tr>

</SeparatorTemplate>

<FooterTemplate>

</tr></tbody>

<tr>

<td colspan="3">

<cc1:PageBar ID="PageBar1" runat="server" PageCount="100" DisplayCount="5" PageIndex="1" />

<input type="text" id = "CI" />

</td>

</td>

</tr>

</table>

</FooterTemplate>

</asp:Repeater>

</div>

</form>

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

复制代码 代码如下:

{"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}

【Jquery+JSon 无刷新分页实现代码】相关文章:

基于jQuery实现的无刷新表格分页实例

jquery滚动特效集锦

Jquery注册事件实现方法

asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

jQuery聚合函数实例

使用RequireJS优化JavaScript引用代码的方法

jquery 构造函数在表单提交过程中修改数据

一段实时更新的时间代码

jQuery+ajax实现无刷新级联菜单示例

javascript模拟评分控件实现方法

精品推荐
分类导航