今天闲来无事,把项目中用到异步数据读取加分页数理的步骤方法整理成Demo;贴出示例代码供需要的同学照搬套用。也可以根据实际需要做相关处理修改;相信会给你带来一定的便利之处。这个示例用到四个文件;Default.aspx、CustomerPager.ascx、AjaxHandler.ashx、jquery.js;这四个文件相信大家一眼就晓得是干嘛用的了。就不多说了。首先先来看看Default.aspx页面前端代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Demo._Default" %>
<%@ Register Src="CustomerPager.ascx" TagName="CustomerPager" TagPrefix="uc1" %>
<!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 runat="server">
<title></title>
<script src="javascript/jQuery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//1.1、刷新页面
function refreshPage() {
var pageIndex = $("[id$='_pagerSelector']")[0].selectedIndex;
pageIndex = pageIndex < 0 ? 0 : pageIndex;
refreshGrid(pageIndex);
}
//1.2、刷新列表
function refreshGrid(pageIndex) {
var ajaxPara = "pageIndex=" + pageIndex + "&pageSize=20";
var ajaxPage = "AjaxHandler.ashx?" + ajaxPara;
var jsonData = ajaxCall(ajaxPage, null);
setPagerInfo(jsonData.totalCount, pageIndex);
var grid = document.getElementById("gridData");
if (grid.rows.length > 1) {
for (var i = grid.rows.length - 1; i > 0; i--) {
grid.deleteRow(i);
}
}
for (var i = 0; i < jsonData.list.length; i++) {
var newRow = grid.insertRow(i + 1);
newRow.insertCell(0).innerHTML = jsonData.list[i].id;
newRow.insertCell(1).innerHTML = jsonData.list[i].name;
newRow.insertCell(2).innerHTML = jsonData.list[i].age;
newRow.insertCell(3).innerHTML = jsonData.list[i].sex;
newRow.align = "center";
newRow.bgColor = (i % 2 == 0 ? "#FFFFFF" : "#C6FBFF"); //隔行背景色
}
}
//1.3、异步取数据方法
function ajaxCall(ajaxPage, jsonData) {
var options = {
type: "POST",
url: ajaxPage,
data: jsonData,
contentType: "application/json;charset=utf-8",
dataType: "string",
async: false,
success: function(response) {
},
error: function(msg) { alert("failed: " + msg); }
};
var returnText = $.ajax(options).responseText;
var op = eval('(' + returnText + ')');
return op;
}
//1.4、设置分页信息下拉框
function setPagerInfo(totalCount, pageIndex) {
var pagers = $("[id$='_pagerSelector']");
var pagerCount = Math.ceil(parseInt(totalCount) / 20);
//填充前,清除所有
for (var i = pagers[0].options.length - 1; i > -1; i--) {
pagers[0].options.remove(i);
pagers[1].options.remove(i);
}
//填充项
for (var i = 0; i < pagerCount; i++) {
var oldLength = pagers[0].options.length;
pagers[0].options.length = oldLength + 1;
pagers[1].options.length = oldLength + 1;
var option1 = new Option(i + 1, i + 1, false, true);
pagers[0].options[oldLength] = option1;
var option2 = new Option(i + 1, i + 1, false, true);
pagers[1].options[oldLength] = option2;
}
$("#<%=CustomerPager1.ClientID %>_pagerCount").html(pagerCount);
$("#<%=CustomerPager2.ClientID %>_pagerCount").html(pagerCount);
//如果页数>1则显示并选中下拉框首项
if (pagerCount > 1) {
pagers[0].options[pageIndex].selected = true;
pagers[1].options[pageIndex].selected = true;
$("#<%=CustomerPager1.ClientID %>_divPage").css("visibility", "visible");
$("#<%=CustomerPager2.ClientID %>_divPage").css("visibility", "visible");
}
else {
$("#<%=CustomerPager1.ClientID %>_divPage").css("visibility", "hidden");
$("#<%=CustomerPager2.ClientID %>_divPage").css("visibility", "hidden");
}
}
//1.5、分页下拉框选择
function pagerSelector_onchange(objPager) {
JumpToPage(null, objPager);
}
//1.6、根据跳转类型跳转
function JumpToPage(type, objThis) {
var objPager = objThis;
var pageIndex = 0;
if (type != null) {
var objPager = objThis.parentNode.childNodes[3].childNodes[0];
}
switch (type) {
case "first":
break;
case "prev":
pageIndex = (objPager.selectedIndex - 1) < 0 ? 0 : (objPager.selectedIndex - 1);
break;
case "next":
pageIndex = (objPager.selectedIndex + 1) > (objPager.length - 1) ? objPager.length - 1 : (objPager.selectedIndex + 1);
break;
case "last":
pageIndex = objPager.length - 1;
break;
default:
pageIndex = objPager.selectedIndex;
break;
}
refreshGrid(pageIndex, true);
}
//1.7、载入数据并定时刷新数据列表
$(document).ready(
function() {
refreshPage();
setInterval("refreshPage()", 5000); //间隔五秒重新读取数据
}
);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<uc1:CustomerPager ID="CustomerPager1" runat="server" />
</td>
</tr>
</table>
<table style="width: 100%;" id="gridData" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>
id
</th>
<th>
Name
</th>
<th>
Age
</th>
<th>
Sex
</th>
</tr>
</table>
<table>
<tr>
<td>
<uc1:CustomerPager ID="CustomerPager2" runat="server" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
再看看CustomerPager.ascx用户控件:很简单,就是分页控件,但没有后端代码的;里面调用的js函数是在Default.aspx页面里。
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CustomerPager.ascx.cs" Inherits="Demo.CustomerPager" %>
<div id="divPage" runat="server" style="float: right; padding-top: 5px; padding-bottom: 5px;">
<table class="pager">
<tr>
<td style="cursor: pointer;" οnclick="JumpToPage('first', this);">
<img alt="" src="../images/pager_first.png" />
</td>
<td style="cursor: pointer;" οnclick="JumpToPage('prev', this);">
<img alt="" src="../images/pager_left.png" />
</td>
<td>
Page
</td>
<td>
<select id="pagerSelector" runat="server" οnchange="pagerSelector_onchange(this);">
</select>
</td>
<td>
of
</td>
<td>
<div id="pagerCount" runat="server">
</div>
</td>
<td style="cursor: pointer;" οnclick="JumpToPage('next', this);">
<img alt="" src="../images/pager_right.png" />
</td>
<td style="cursor: pointer;" οnclick="JumpToPage('last', this);">
<img alt="" src="../images/pager_Last.png" />
</td>
</tr>
</table>
</div>
再看看AjaxHandler.ashx相关处理方法:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.Services;
namespace Demo
{
/// <summary>
/// Summary description for $codebehindclassname$
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class AjaxHandler : IHttpHandler
{
private string returnJsonData = string.Empty;
private int pageIndex = 0;
private int pageSize = 20;
public void ProcessRequest(HttpContext context)
{
GetUrlParameters(context);
var totalCount = 0;
var pageData = new PageData();
pageData.list = GetTestList(out totalCount);
pageData.totalCount = totalCount;
var jsonObject = new JavaScriptSerializer();
returnJsonData = jsonObject.Serialize(pageData);
context.Response.ContentType = "application/json";
context.Response.ContentEncoding = Encoding.UTF8;
context.Response.Write(returnJsonData);
context.Response.Flush();
context.Response.End();
}
/// <summary>
/// 获取参数信息
/// </summary>
/// <param name="context"></param>
public void GetUrlParameters(HttpContext context)
{
pageIndex = Convert.ToInt32(context.Request["pageIndex"]);
pageSize = Convert.ToInt32(context.Request["pageSize"]);
}
/// <summary>
/// 获取数据列表
/// </summary>
/// <param name="totalCount"></param>
/// <returns></returns>
public List<TestEntity> GetTestList(out int totalCount)
{
//pageSize
//pageIndex
//可以根据以上这两参数值查询所需分页数据
var startIndex = pageIndex * pageSize;
var endedIndex = startIndex + pageSize;
totalCount = 100;
var testList = new List<TestEntity>();
for (int i = startIndex; i < endedIndex; i++)
{
var entity = new TestEntity();
entity.id = i.ToString();
entity.name = "kevin" + i.ToString();
entity.sex = "man";
entity.age = "30";
testList.Add(entity);
}
return testList;
}
public bool IsReusable
{
get
{
return false;
}
}
}
public class TestEntity
{
public string id { set; get; }
public string name { set; get; }
public string sex { set; get; }
public string age { set; get; }
}
public class PageData
{
public List<TestEntity> list { set; get; }
public int totalCount { set; get; }
}
}
jquery.js这个文件就不多说了。
希望能给你的开发带来一定的便利。O(∩_∩)O~ 源码示例Demo这里下载。
Kevin.Chen
2012-04-05