我們來看一下需求分析：
3.==》無(wú)刷新的分頁(yè)讀取新聞列表，在點(diǎn)擊下一頁(yè)的時(shí)候觸發(fā)事件，調(diào)用ajax去數(shù)據(jù)庫(kù)中查找下一頁(yè)的數(shù)據(jù)并返回，然后顯示在頁(yè)面上。
這里面有兩個(gè)事件，都是js事件，我們用jquery代碼來實(shí)現(xiàn)。
分頁(yè)的話，我們采用jquery的分頁(yè)插件pagination，官方地址為http://plugins.jquery.com/project/pagination下載js文件和css文件（最下面附下載地址）
先講講它的基本用法：
跟一般的jQuery插件一樣，此插件使用也很簡(jiǎn)單便捷。方法是pagination，例如$("#page").pagination(100);，這里的100參數(shù)是必須的，表示顯示項(xiàng)目的總個(gè)數(shù)，這是最簡(jiǎn)單的使用。
例如下面的使用代碼：
復(fù)制代碼代碼如下:
$("#Pagination").pagination(56, {
num_edge_entries: 2,
num_display_entries: 4,
callback: pageselectCallback,
items_per_page:1
});
這段代碼表示的含義是：總共有56(maxentries)個(gè)列表項(xiàng)，首尾兩側(cè)分頁(yè)顯示2(num_edge_entries)個(gè)，連續(xù)分頁(yè)主體數(shù)目顯示4(num_display_entries)個(gè)，回調(diào)函數(shù)為pageselectCallback(callback)，每頁(yè)顯示的列表項(xiàng)為 1(items_per_page)。您可以對(duì)照參數(shù)表修改配置這里的參數(shù)。
具體的用法可以參考官方文檔或是http://www.cnblogs.com/aosiyelong/archive/2010/03/30/1700262.html
然后講講如何將它整合到我們這邊來。
在NewsList.aspx頁(yè)面中添加相關(guān)的js文件和css文件（最下面附下載地址）：jquery-1.4.1.js，pagination.js
復(fù)制代碼代碼如下:
<link type="text/css" rel="Stylesheet" href="css/newsList.css" />
<link type="text/css" rel="Stylesheet" href="css/pagination.css" />
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/jquery.pagination.js" type="text/javascript"></script>
然后，我們來看關(guān)鍵的js代碼：
復(fù)制代碼代碼如下:
<script type="text/javascript" language="javascript">
$().ready(function() {
InitData(0);
});
//處理翻頁(yè)
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",//數(shù)據(jù)格式JSON
url:'Ajax/NewsHandler.ashx',//目標(biāo)地址
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=\"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: '<< 上一頁(yè),
next_text: '下一頁(yè) >>',
items_per_page:9,
num_display_entries:6,
current_page:pageindx,
num_edge_entries:2
});
}
</script>
這里有必要說明下json數(shù)據(jù)格式，JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式，它是類似于xml的數(shù)據(jù)交換格式，格式示例如下：
復(fù)制代碼代碼如下:
[
{
"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有現(xiàn)成的josn處理的dll，名為Newtonsoft.Json.Net20（最下面附下載地址），用它處理json非常的方便，我們可以像處理對(duì)象一樣處理json。
因?yàn)槲覀冊(cè)谧x取列表的時(shí)候從數(shù)據(jù)庫(kù)中讀出來的是一張table（datatable格式），而要將它顯示在前臺(tái)，如果自己一個(gè)個(gè)拼湊字符串的話會(huì)非常麻煩，而且擴(kuò)展性不好，所有我們采用json文件，這樣就需要一個(gè)方法將datatable轉(zhuǎn)為json，該方法如下：
代碼
復(fù)制代碼代碼如下:
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();
}
我們來看一下上面關(guān)鍵的js代碼：InitData(pageindx)是用來處理第pageindx頁(yè)的顯示數(shù)據(jù)的，我們著重來看一下這個(gè)ajax處理文件NewsHandler.ashx，當(dāng)然也可以用aspx文件作為ajax后臺(tái)處理文件。
在項(xiàng)目中添加ajax文件夾用來存放ajax處理文件，并且添加Generic Handler類型的文件（或是一般的webform），取名為NewsHandler.ashx，這個(gè)文件是用來處理ajax請(qǐng)求的。
主要代碼如下：
復(fù)制代碼代碼如下:
int pageindex;//頁(yè)數(shù)
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);//獲取數(shù)據(jù)
string jsonData = DataTableToJSON(dt, "News");//創(chuàng)建json對(duì)象,將datatable對(duì)象轉(zhuǎn)換為json對(duì)象
context.Response.Write(jsonData);//返回json數(shù)據(jù)
上面的代碼中有這樣一個(gè)方法 PageData(pageindex, 10, "tb_news", orderby);方法主要獲取第幾頁(yè)的數(shù)據(jù)，詳細(xì)代碼如下：
代碼
復(fù)制代碼代碼如下:
#region 返回特定頁(yè)數(shù)的數(shù)據(jù)
/// <summary>
/// 返回特定頁(yè)數(shù)的數(shù)據(jù)
/// </summary>
/// <param name="pageindex">特定的頁(yè)數(shù)</param>
/// <param name="pagesize">頁(yè)的大小</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());//數(shù)據(jù)的總數(shù)
int pageCount;//總共的頁(yè)數(shù)
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 " + table + " 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
整合一下就實(shí)現(xiàn)了需求分析的第三點(diǎn)了。可能上面的代碼有點(diǎn)多有點(diǎn)亂。
按照以下的步驟：
1。將相應(yīng)的js文件和css文件拷到對(duì)應(yīng)的位置
2。添加ajax文件，并添加NewsHandler.ashx文件用以處理ajax請(qǐng)求
3。在NewsHandler.ashx.cs文件中添加代碼，有兩個(gè)方法比較重要，PageData(int pageindex, int pagesize, string table, string orderby)和DataTableToJSON(DataTable dt, string dtName)
4。將NewsHandler.ashx.cs中處理代碼和返回的json字符串整合好，主要代碼以在上文給出，在這里注意添加命名空間和添加引用（提供下載）
5。編輯NewsList.aspx文件，分別編輯前臺(tái)和后臺(tái)。前臺(tái)用以顯示（已大體給出，需結(jié)合上一篇文章），后臺(tái)主要得到一個(gè)新聞條數(shù)
主要代碼如下：
復(fù)制代碼代碼如下:
protected void InitPageCount()
{
conn = new OleDbConnection(connectionString);//創(chuàng)建新的連接
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);//如果連接失敗，將錯(cuò)誤顯示出來
}
finally
{
conn.Close();//一定要及時(shí)關(guān)掉conn
}
}
需-需聲明protected string pagecount;以便讓前臺(tái)能夠獲取
附代碼的下載：（只實(shí)現(xiàn)了無(wú)刷新的分頁(yè)，預(yù)覽新聞內(nèi)容等待下一章）
css、js、dll、項(xiàng)目（僅無(wú)刷新分頁(yè)）
注：雖然提供了完整的代碼，但不建議一開始就下載完整的，要自己動(dòng)手
