`
zdb_cn
  • 浏览: 124173 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

javascript 分页

 
阅读更多 
//////1.设计htm页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>test2</title> 
<script language="javascript" type="text/javascript" src="js/jquery-latest.pack.js"></script> 
<script language="javascript" type="text/javascript" src="js/PageDate.js"></script> 
 
</head> 
<body> 
<div> 
<div> 
<br /> 
<input id="first" type="button" value=" << " /><input id="previous" type="button" 
value=" < " /><input id="next" type="button" value=" > " /><input id="last" type="button" 
value=" >> " /> 
&nbsp;<span id="pageinfo"></span> 
<ul id="datas"> 
<li id="template"> 
<span id="OrderID"> 
订单ID  
</span>/  
<span id="CustomerID"> 
客户ID  
</span> 
<span id="EmployeeID"> 
雇员ID  
</span>/  
<span id="OrderDate"> 
订购日期  
</span>/  
<span id="ShippedDate"> 
发货日期  
</span>/  
<span id="ShippedName"> 
货主名称  
</span>/  
<span id="ShippedAddress"> 
货主地址  
</span>/  
<span id="ShippedCity"> 
货主城市  
</span>/  
<span id="more"> 
更多信息  
</span> 
</li> 
</ul> 
</div> 
<div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red"> 
LOADING....  
</div> 
<input type="hidden" id="pagecount" /> 
</div> 
</body> 
</html> 
////注：ID属性比较重要，用于数据绑定。

/////2.使用jQuery编写AJAX请求文件

var pageIndex = 1 
var pageCount = 0;  
 
$(function(){  
GetPageCount();//取得分页总数  
pageCount = parseInt($("#pagecount").val());//分页总数放到变量pageCount里  
$("#load").hide();//隐藏loading提示  
$("#template").hide();//隐藏模板  
ChangeState(0,1);//设置翻页按钮的初始状态  
 
bind();//绑定第一页的数据  
 
//第一页按钮click事件  
$("#first").click(function(){  
pageIndex = 1;  
ChangeState(0,1);  
bind();   
});  
 
//上一页按钮click事件  
$("#previous").click(function(){  
pageIndex -= 1;  
ChangeState(-1,1);   
if(pageIndex <= 1)  
{  
pageIndex = 1;  
ChangeState(0,-1);  
}  
bind();   
});  
 
//下一页按钮click事件  
$("#next").click(function(){  
pageIndex += 1;  
ChangeState(1,-1);  
if(pageIndex>=pageCount)  
{  
pageIndex = pageCount;  
ChangeState(-1,0);  
}  
bind(pageIndex);   
});  
 
//最后一页按钮click事件  
$("#last").click(function(){  
pageIndex = pageCount;  
ChangeState(1,0);  
bind(pageIndex);   
});   
});  
 
//AJAX方法取得数据并显示到页面上  
function bind()  
{  
$("[@id=ready]").remove();  
$("#load").show();  
$.ajax({  
type: "get",//使用get方法访问后台  
dataType: "json",//返回json格式的数据  
url: "Handler.ashx",//要访问的后台地址  
data: "pageIndex=" + pageIndex,//要发送的数据  
complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示  
success: function(msg){//msg为返回的数据，在这里做数据绑定  
var data = msg.table;  
$.each(data, function(i, n){  
var row = $("#template").clone();  
row.find("#OrderID").text(n.OrderID);  
row.find("#CustomerID").text(n.CustomerID);  
row.find("#EmployeeID").text(n.EmployeeID);  
row.find("#OrderDate").text(ChangeDate(n.OrderDate));  
if(n.RequiredDate !== undefined) row.find("#ShippedDate").text(ChangeDate(n.RequiredDate));  
row.find("#ShippedName").text(n.ShipName);  
row.find("#ShippedAddress").text(n.ShipAddress);  
row.find("#ShippedCity").text(n.ShipCity);  
row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.OrderID + "&pageindex="+pageIndex+">&nbsp;More</a>");   
row.attr("id","ready");//改变绑定好数据的行的id  
row.appendTo("#datas");//添加到模板的容器中  
});  
$("[@id=ready]").show();  
SetPageInfo();  
}  
});  
}  
 
function ChangeDate(date)  
{  
return date.replace("-","/").replace("-","/");  
}  
 
//设置第几页/共几页的信息  
function SetPageInfo()  
{  
$("#pageinfo").html(pageIndex + "/" + pageCount);  
}  
 
//AJAX方法取得分页总数  
function GetPageCount()  
{  
$.ajax({  
type: "get",  
dataType: "text",  
url: "Handler.ashx",  
data: "getPageCount=1",  
async: false,  
success: function(msg){  
$("#pagecount").val(msg);  
}  
});  
}  
 
//改变翻页按钮状态   
function ChangeState(state1,state2)  
{  
if(state1 == 1)  
{   
document.getElementById("first").disabled = "";  
document.getElementById("previous").disabled = "";  
}  
else if(state1 == 0)  
{   
document.getElementById("first").disabled = "disabled";  
document.getElementById("previous").disabled = "disabled";  
}  
if(state2 == 1)  
{  
document.getElementById("next").disabled = "";  
document.getElementById("last").disabled = "";  
}  
else if(state2 == 0)  
{  
document.getElementById("next").disabled = "disabled";  
document.getElementById("last").disabled = "disabled";  
}  
} 


/////3.利用JSON三方控件在服务器端获取JSON格式数据

<%@ WebHandler Language="C#" Class="jQueryJSON.Handler" %> 
 
using System;  
using System.Data;  
using System.Web;  
using System.Collections;  
using System.Web.Services;  
using System.Web.Services.Protocols;  
using System.Configuration;  
using System.Data.SqlClient;  
using System.Text;  
using System.Xml;  
using NetServ.Net.Json;  
 
namespace jQueryJSON  
{  
/// <summary> 
/// $codebehindclassname$ 的摘要说明  
/// </summary> 
[WebService(Namespace = "http://tempuri.org/json/")]  
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  
public class Handler : IHttpHandler  
{  
readonly int PageSize = int.Parse(ConfigurationManager.AppSettings["PageSize"]);  
public void ProcessRequest(HttpContext context)  
{  
context.Response.ContentType = "text/plain";  
//不让浏览器缓存  
context.Response.Buffer = true;  
context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);  
context.Response.AddHeader("pragma", "no-cache");  
context.Response.AddHeader("cache-control", "");  
context.Response.CacheControl = "no-cache";  
 
string result = "";  
if (context.Request.Params["getPageCount"] != null) result = GetPageCount();  
if (context.Request.Params["pageIndex"] != null)  
{  
string pageindex = context.Request.Params["pageIndex"];  
//if (context.Cache.Get(pageindex) != null)  
// result = context.Cache.Get(pageindex).ToString();  
//else  
//{  
// result = GetPageData(context.Request.Params["pageIndex"]);  
// context.Cache.Add(  
// pageindex,  
// result,  
// null,  
// DateTime.Now.AddMinutes(1),  
// System.Web.Caching.Cache.NoSlidingExpiration,  
// System.Web.Caching.CacheItemPriority.Default,  
// null);  
//}  
result = GetPageData(context.Request.Params["pageIndex"]);  
}  
context.Response.Write(result);  
}  
 
private string GetPageData(string p)  
{  
int PageIndex = int.Parse(p);  
string sql;  
if (PageIndex == 1)  
sql = "select top " + PageSize.ToString() + " * from Orders order by OrderID desc";  
else  
sql = "select top " + PageSize.ToString() + " * from Orders where OrderID not in(select top " + ((PageIndex - 1) * PageSize).ToString() + " OrderID from Orders order by OrderID desc) order by OrderID desc";  
string dbfile = ConfigurationManager.ConnectionStrings["conn"].ToString();  
SqlConnection conn = new SqlConnection(dbfile);  
SqlDataAdapter da = new SqlDataAdapter(sql, conn);  
DataTable dt = new DataTable("table");  
da.Fill(dt);  
return DataTableJson(dt);  
 
}  
 
private string GetPageCount()  
{  
string dbfile = ConfigurationManager.ConnectionStrings["conn"].ToString();  
SqlConnection conn = new SqlConnection(dbfile);  
SqlCommand cmd = new SqlCommand("select count(*) from Orders", conn);  
conn.Open();  
int rowcount = Convert.ToInt32(cmd.ExecuteScalar());  
conn.Close();  
return ((rowcount + PageSize - 1) / PageSize).ToString();  
}  
 
private string DataTable2Json(DataTable dt)  
{  
StringBuilder jsonBuilder = new StringBuilder();  
jsonBuilder.Append("{\"");  
jsonBuilder.Append(dt.TableName);  
jsonBuilder.Append("\":[");  
for (int i = 0; i < dt.Rows.Count; i++)  
{  
jsonBuilder.Append("{");  
for (int j = 0; j < dt.Columns.Count; j++)  
{  
jsonBuilder.Append("\"");  
jsonBuilder.Append(dt.Columns[j].ColumnName);  
jsonBuilder.Append("\":\"");  
jsonBuilder.Append(dt.Rows[i][j].ToString());  
jsonBuilder.Append("\",");  
}  
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);  
jsonBuilder.Append("},");  
}  
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);  
jsonBuilder.Append("]");  
jsonBuilder.Append("}");  
return jsonBuilder.ToString();  
}  
 
private string DataTableJson(DataTable dt)  
{  
JsonWriter writer = new JsonWriter();  
JsonObject content = new JsonObject();  
JsonArray Orders = new JsonArray();  
JsonObject Order;  
JsonObject OrderItem = new JsonObject();  
 
for (int i = 0; i < dt.Rows.Count; i++)  
{  
Order = new JsonObject();  
for(int j =0;j<dt.Columns.Count;j++)  
{   
Order.Add(dt.Columns[j].ColumnName, dt.Rows[i][j].ToString());  
}  
Orders.Add(Order);   
}   
content.Add(dt.TableName, Orders);  
content.Write(writer);  
 
writer = new IndentedJsonWriter();  
content.Write(writer);  
 
return writer.ToString();  
}  
 
public bool IsReusable  
{  
get  
{  
return false;  
}  
}  
}  
}

 

分享到：
| jquery ajax
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javaScript分页

    JavaScript分页是网页开发中一个常见且重要的功能，它用于处理大量数据的显示，通过将数据分割成小块，逐页加载，提高了用户体验并优化了页面性能。在本项目中，我们将探讨如何使用纯JavaScript实现分页功能，以及...

    javascript 分页模块

    7. **类库与插件**：在实际开发中，我们往往使用现有的JavaScript分页库，如`bootstrap-paginator.js`、`pager.js`或本案例中的`Cls_jsPage.js`，这些库封装了上述逻辑，提供更易用的API。 8. **示例代码**：`demo....

    Javascript分页效果（收集了很多强大的JS分页代码）

    这个压缩包中包含了多个JavaScript分页代码示例，适合网页开发者参考和直接应用。 分页效果的实现通常包括以下几个核心部分： 1. 数据获取：首先，需要获取要分页展示的数据。这些数据可以来源于服务器端（如通过...

    js分页javascript分页

    JavaScript分页是网页开发中常用的一种技术，用于处理大量数据时，将数据分割成多个页面进行展示，提高用户体验。在不加载所有数据的情况下，只加载用户当前查看的部分，这样可以减少页面加载时间，提高页面性能。...

    一个通用的JavaScript分页

    JavaScript分页是网页开发中常见的功能，用于处理大量数据时分块显示，提高用户体验。以下是对这个通用JavaScript分页实现的详细解析： 1. **变量定义**： - `totalNum`：总记录数，表示数据源中的条目总数。 - `...

    分享一个自己写的简单的javascript分页组件

    本文介绍了一个使用JavaScript实现的简单分页组件，该组件通过HTML、CSS和JavaScript完成了一个基本的分页功能。...用户可以很轻松地将分页...对于初学者来说，这个组件可以作为学习JavaScript分页功能的一个良好起点。

    10种JavaScript分页代码.rar

    JavaScript分页是网页开发中的一个重要技术，特别是在处理大数据集或长列表时，为了提高用户体验，通常会采用分页展示数据。这个"10种JavaScript分页代码.rar"压缩包文件包含了一系列实现JavaScript分页功能的源代码...

    10种JavaScript分页代码

    JavaScript分页是网页开发中的一个重要技术，特别是在处理大数据集或长列表时，为了提高用户体验，通常会采用分页展示数据。这些分页代码示例提供了多种实现方式，可以帮助开发者理解和应用JavaScript分页功能。 ...

    javascript分页

    JavaScript分页是网页开发中的一个重要技术，用于处理大量数据或内容的显示，使得用户可以方便地浏览和导航。在网页中，当数据无法一次性完全加载时，分页就显得尤为重要，它可以提高页面加载速度，优化用户体验。...

    javascript分页控件20090312

    JavaScript分页控件是网页开发中常用的一种组件，主要用于处理大量数据时的页面显示，以提高用户体验和网页加载效率。2009年3月12日发布的这个资源可能是一个JavaScript实现的分页插件或者代码库，它可以帮助开发者...

    javascript分页控件20090313

    下面我们将深入探讨JavaScript分页控件的相关知识点。 一、JavaScript分页的基本原理 1. 数据分块：JavaScript分页控件的核心思想是将大量数据分成若干小块（页）进行加载。每次只加载用户当前浏览的一页数据，...

    经典JavaScript分页代码

    JavaScript分页是一种常见的网页交互功能，它允许用户在大量数据中按需加载和切换页面，提高用户体验。这个经典JavaScript分页代码实现了一个名为`Page`的类，用于处理分页逻辑。下面将详细解析这个代码中的关键知识...

    10种JavaScript分页效果

    本资源包含10种JavaScript分页效果的实现，旨在帮助开发者更好地理解和应用这一技术。 1. **基础分页**: 基础的分页通常包括数字链接，用户可以点击来跳转到不同的页面。这种分页方式简单直观，易于实现，但可能...

    laypage多功能JavaScript分页组件 v1.3-源码.zip

    《laypage多功能JavaScript分页组件 v1.3-源码》是专为前端开发者设计的一款高效、易用的分页插件。它以其强大的功能、灵活的配置选项和简洁的API，深受广大开发者喜爱。在深入理解并使用这款组件之前，我们需要先...

    高效的JavaScript分页筛选TinyTable表格插件

    总的来说，"高效的JavaScript分页筛选TinyTable表格插件"是一个强大的工具，可以帮助开发者创建具有高性能和用户友好的数据展示界面。它不仅简化了前端开发流程，而且通过提供动态筛选和分页功能，提升了用户对大量...

    javascript分页(页码生成)

    ### JavaScript分页（页码生成）详解 在Web开发中，分页是处理大量数据时常用的一种技术，它能够有效地提升用户体验，避免一次性加载过多数据导致页面响应缓慢。本文将详细解析一个基于JavaScript的简单分页实现...

    JavaScript分页

    JavaScript分页是网页开发中一个常见的技术，它允许用户在不刷新整个页面的情况下，通过点击按钮或链接来加载更多的内容。这种技术对于处理大量数据，如数据库查询结果、文章列表或者用户评论等，非常有效，提高了...

Magicbox
Global site tag (gtag.js) - Google Analytics