前面两个章节我们将需求分析和概要设计简单介绍了，接下来是重点的编代码的阶段了（实现无刷新分页）。在编写代码之前，一定要有计划的去编写代码，不能一开始啥也不管就开始编代码，除非你特牛。

　　我们来看一下需求分析：

　　3.==》无刷新的分页读取新闻列表，在点击下一页的时候触发事件，调用ajax去数据库中查找下一页的数据并返回，然后显示在页面上。

　　这里面有两个事件，都是js事件，我们用jquery代码来实现。

　　分页的话，我们采用jquery的分页插件pagination，官方地址为http://plugins.jquery.com/project/pagination下载js文件和css文件（最下面附下载地址）

　　先讲讲它的基本用法：

　　跟一般的jQuery插件一样，此插件使用也很简单便捷。方法是pagination，例如$("#page").pagination(100);，这里的100参数是必须的，表示显示项目的总个数，这是最简单的使用。

　　例如下面的使用代码：

$("#Pagination").pagination(56,　{
num_edge_entries:　2,
num_display_entries:　4,
callback:　pageselectCallback,
items_per_page:1
});

　　这段代码表示的含义是：总共有56(maxentries)个列表项，首尾两侧分页显示2(num_edge_entries)个，连续分页主体数目显示4(num_display_entries)个，回调函数为pageselectCallback(callback)，每页显示的列表项为 1(items_per_page)。您可以对照参数表修改配置这里的参数。

　　具体的用法可以参考官方文档或是http://www.cnblogs.com/aosiyelong/archive/2010/03/30/1700262.html

　　然后讲讲如何将它整合到我们这边来。

　　在NewsList.aspx页面中添加相关的js文件和css文件（最下面附下载地址）：jquery-1.4.1.js，pagination.js

<link　type="text/css"　rel="Stylesheet"　href="http://tech.ddvip.com/2010-07/css/newsList.css"　/>
<link　type="text/css"　rel="Stylesheet"　href="http://tech.ddvip.com/2010-07/css/pagination.css"　/>
<script　src="http://tech.ddvip.com/2010-07/js/jquery-1.4.1.js"　type="text/javascript"></script>
<script　src="http://tech.ddvip.com/2010-07/js/jquery.pagination.js"　type="text/javascript"></script>

　　然后，我们来看关键的js代码：

<script　type="text/javascript"　language="javascript">
$().ready(function()　{
InitData(0);
});
//处理翻页
function　pageselectCallback(page_id,　jq)　{
//alert(page_id);
InitData(page_id);
};
function　InitData(pageindx)
{
var　tbody　=　"";
var　orderby="news_id";
$.ajax({
type:　"POST",//用POST方式传输
dataType:"json",//数据格式JSON
url:'Ajax/NewsHandler.ashx',//目标地址
data:"pageno="+(pageindx+1)+"&orderby="+orderby,
success:function(json)　{
$("#productTable　tr:gt(0)").remove();
var　productData　=　json.News;
$.each(productData,　function(i,　n)　{
var　trs　=　"";
trs　+=　"<tr><td　style='text-align:center'><a　href=http://tech.ddvip.com/2010-07/\"NewsRead.aspx?news_id="+n.news_id+"\"　class=\"info2\"　>"　+　n.news_title　+　"</a></td><td　style='text-align:center'>"　+　n.news_readtimes　+　"</td><td　style='text-align:center'>"　+　n.news_time　+　"</td></tr>";
tbody　+=　trs;
});
$("#productTable").append(tbody);
//奇偶行颜色不同
$("#productTable　tr:gt(0):odd").attr("class",　"odd");
$("#productTable　tr:gt(0):even").attr("class",　"enen");
　
}
});
$("#pagination").pagination(<%=pagecount　%>,　{
callback:　pageselectCallback,
prev_text:　'<<　上一页,
next_text:　'下一页　>>',
items_per_page:9,
num_display_entries:6,
current_page:pageindx,
num_edge_entries:2
});
}
</script>

　　这里有必要说明下json数据格式，JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，它是类似于xml的数据交换格式，格式示例如下：

[
　{
　"term":"BACCHUS",
　"part":"n.",
　"definition":"A　convenient　deity　invented　by　the　ancients　as　an　excuse　for　getting　drunk.",
　"quote":[
　"Is　public　worship,then,a　sin.",
　"That　for　devotions　paid　to　Bacchus",
　"The　lictors　dare　to　run　us　in.",
　"And　resolutely　thump　and　whack　us?"
　],
　"author":"Jorace"
　},
　{
　"term":"BACKBITE",
　"part":"v.t.",
　"definition":"To　speak　of　a　man　as　you　find　him　when　he　can　t　find　you."
　},
　{
　"term":"BEARD",
　"part":"n.",
　"definition":"The　hair　that　is　commonly　cut　off　by　those　who　justly　execrate　the　absurd　Chinese　custom　of　shaving　the　bead."
　}
]

　　asp.net有现成的josn处理的dll，名为Newtonsoft.Json.Net20（最下面附下载地址），用它处理json非常的方便，我们可以像处理对象一样处理json。

　　因为我们在读取列表的时候从数据库中读出来的是一张table（datatable格式），而要将它显示在前台，如果自己一个个拼凑字符串的话会非常麻烦，而且扩展性不好，所有我们采用json文件，这样就需要一个方法将datatable转为json，该方法如下：

　　代码

public　static　string　DataTableToJSON(DataTable　dt,　string　dtName)
{
StringBuilder　sb　=　new　StringBuilder();
StringWriter　sw　=　new　StringWriter(sb);
using　(JsonWriter　jw　=　new　JsonTextWriter(sw))
{
JsonSerializer　ser　=　new　JsonSerializer();
jw.WriteStartObject();
jw.WritePropertyName(dtName);
jw.WriteStartArray();
foreach　(DataRow　dr　in　dt.Rows)
{
jw.WriteStartObject();
foreach　(DataColumn　dc　in　dt.Columns)
{
jw.WritePropertyName(dc.ColumnName);
ser.Serialize(jw,　dr[dc].ToString());
}
jw.WriteEndObject();
}
jw.WriteEndArray();
jw.WriteEndObject();
sw.Close();
jw.Close();
}
return　sb.ToString();
}

　　我们来看一下上面关键的js代码：InitData(pageindx)是用来处理第pageindx页的显示数据的，我们着重来看一下这个ajax处理文件NewsHandler.ashx，当然也可以用aspx文件作为ajax后台处理文件。

　　在项目中添加ajax文件夹用来存放ajax处理文件，并且添加Generic Handler类型的文件（或是一般的webform），取名为NewsHandler.ashx，这个文件是用来处理ajax请求的。

　　主要代码如下：

int　pageindex;//页数
int.TryParse(context.Request["pageno"],　out　pageindex);//把赋值给pageindex
string　orderby　=　context.Request["orderby"].ToString();//以什么排序
DataTable　dt　=　new　DataTable();
dt　=　PageData(pageindex,　10,　"tb_news",　orderby);//获取数据
string　jsonData　=　DataTableToJSON(dt,　"News");//创建json对象,将datatable对象转换为json对象
context.Response.Write(jsonData);//返回json数据

　　上面的代码中有这样一个方法 PageData(pageindex, 10, "tb_news", orderby);方法主要获取第几页的数据，详细代码如下：

　　代码

#region　返回特定页数的数据
///　<summary>
///　返回特定页数的数据
///　</summary>
///　<param　name="pageindex">特定的页数</param>
///　<param　name="pagesize">页的大小</param>
///　<param　name="table">哪张表</param>
///　<returns></returns>
public　DataTable　PageData(int　pageindex,　int　pagesize,　string　table,　string　orderby)
{
string　connectionString　=　System.Web.Configuration.WebConfigurationManager.ConnectionStrings["NewsConnection"].ToString();
OleDbConnection　conn;
if　(pageindex　<　1)
pageindex　=　1;
conn　=　new　OleDbConnection(connectionString);
DataTable　dt=new　DataTable();
try
{
conn.Open();
OleDbCommand　cmdTotal　=　new　OleDbCommand("select　count(0)　from　"　+　table,　conn);
int　recordCount　=　Convert.ToInt32(cmdTotal.ExecuteScalar());//数据的总数
int　pageCount;//总共的页数
if　(recordCount　%　pagesize　>　0)
pageCount　=　recordCount　/　pagesize　+　1;
else
pageCount　=　recordCount　/　pagesize;
if　(pageindex　>　pageCount)
pageindex　=　pageCount;
DataTable　dataTemp　=　new　DataTable();
string　cmdText　=　"select　news_id,news_title,news_readtimes,news_time　from　"　+ftable　+　"　order　by　"　+　orderby　+　"　desc";
OleDbCommand　cmd　=　new　OleDbCommand(cmdText,　conn);
OleDbDataAdapter　oda　=　new　OleDbDataAdapter(cmd);
oda.Fill(dataTemp);
dt=　dataTemp.Clone();
for　(int　i　=　0;　i　<　pagesize;　i++)
{
if　(recordCount　<=　(pagesize　*　(pageindex　-　1)　+　i))
break;
dt.Rows.Add(dataTemp.Rows[pagesize　*　(pageindex　-　1)　+　i].ItemArray);
}
}
catch　(Exception　e)
{
}
finally
{
conn.Close();
}
return　dt;
}
#endregion

　　整合一下就实现了需求分析的第三点了。可能上面的代码有点多有点乱。

　　按照以下的步骤：

　　1。将相应的js文件和css文件拷到对应的位置

　　2。添加ajax文件，并添加NewsHandler.ashx文件用以处理ajax请求

　　3。在NewsHandler.ashx.cs文件中添加代码，有两个方法比较重要，PageData(int pageindex, int pagesize, string table, string orderby)和DataTableToJSON(DataTable dt, string dtName)

　　4。将NewsHandler.ashx.cs中处理代码和返回的json字符串整合好，主要代码以在上文给出，在这里注意添加命名空间和添加引用（提供下载）

　　5。编辑NewsList.aspx文件，分别编辑前台和后台。前台用以显示（已大体给出，需结合上一篇文章），后台主要得到一个新闻条数

　　主要代码如下：

　　代码

　protected　void　InitPageCount()
　　　　　　　　{
　　　　　　　　　　　　conn　=　new　OleDbConnection(connectionString);//创建新的连接
　　　　　　　　　　　　try
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　conn.Open();
　　　　　　　　　　　　　　　　string　cmdText　=　"select　count(0)　as　pages　from　tb_news";
　　　　　　　　　　　　　　　　OleDbCommand　cmd　=　new　OleDbCommand(cmdText,　conn);
　　　　　　　　　　　　　　　　DataTable　dt　=　new　DataTable();
　　　　　　　　　　　　　　　　OleDbDataAdapter　oda　=　new　OleDbDataAdapter(cmd);
　　　　　　　　　　　　　　　　oda.Fill(dt);
　　　　　　　　　　　　　　　　if　(dt　!=　null)
　　　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　　　　　pagecount　=　dt.Rows[0]["pages"].ToString();
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　}
　　　　　　　　　　　　catch　(Exception　e)
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　pagecount　=　"0";
　　　　　　　　　　　　　　　　Response.Write("Error："　+　e.Message);//如果连接失败，将错误显示出来
　　　　　　　　　　　　}
　　　　　　　　　　　　finally
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　conn.Close();//一定要及时关掉conn
　　　　　　　　　　　　}
　　　　　　　　}

　　需-需声明protected string pagecount;以便让前台能够获取

　　附代码的下载：（只实现了无刷新的分页，预览新闻内容等待下一章）