|
|
復(fù)制代碼 代碼如下:
<script src="common/jquery.js" type="text/Javascript"></script>
<script src="common/jquery.pagination.js" type="text/Javascript"></script>
<link href="common/tablesorter.css" rel="stylesheet" type="text/css" />
<link href="common/pagination.css" rel="stylesheet" type="text/css" />
接著在頁面的body里面寫入如下的代碼，在這里強(qiáng)調(diào)一下呈現(xiàn)出來的數(shù)據(jù)是沒有進(jìn)行控件綁定的，完全是由簡(jiǎn)單的table來呈現(xiàn)數(shù)據(jù)的，先看一下頁面代碼
復(fù)制代碼 代碼如下:
<div>
<table id="linkTable" cellpadding="6" cellspacing="1" align="left" class="tablesorter" style="width:400px;margin:0 0 20px 5px;">
<thead>
<tr class="tableHeader" align="center">
<th style="width:200px; text-align:center;" >
產(chǎn)品名稱
</th>
<th style="width:200px; text-align:center">
產(chǎn)品單價(jià)
</th>
</tr>
</thead>
</table>
</div>
<div id="Pagination" class="digg"></div>
我們先分析一下代碼，很明顯我們?cè)O(shè)定了一個(gè)標(biāo)準(zhǔn)的帶有<thead>的表格，然后再加上了我們使用到的Jquery的插件―Paination，在這里我們只需定義一下一個(gè)以id為Pagination的層就可以了。頁面的代碼我們分析到這里，下面就來看一下關(guān)鍵的js代碼
復(fù)制代碼 代碼如下:
<script language="Javascript" type="text/Javascript">
var orderby = ""; //進(jìn)行排序的依據(jù)
$(document).ready(function() {
InitData(0); //初始化數(shù)據(jù)
});
//這個(gè)事件是在翻頁時(shí)候用的
function pageselectCallback(page_id, jq) {
InitData(page_id);
}
function InitData(pageIndex) {
var tbody = ""; //聲明表格中body部分
$.ajax({ //這里使用到Jquery的ajax方法，具體使用在這里不詳細(xì)敘述
type: "POST",
dataType: "json",
url: '/DataListWeb/WebService/GetData.ashx', //請(qǐng)求的處理數(shù)據(jù)
data: "pageIndex=" + (pageIndex + 1) + "&sortType=" + orderby,
//傳入的參數(shù)，第一個(gè)參數(shù)就是分頁的頁數(shù)，第二個(gè)參數(shù)為排序的依據(jù)
//下面的操作就是成功返回?cái)?shù)據(jù)以后，進(jìn)行數(shù)據(jù)的綁定
success: function(data) {
$("#linkTable tr:gt(0)").remove();
var myData = data.Products;
$.each(myData, function(i, n) {
var trs = "";
trs += "<tr><td align='center'>" + n.ProductName + "</td><td>" + n.QuantityPerUnit + "</td></tr>";
tbody += trs;
});
$("#linkTable").append(tbody);
}
});
//加入分頁的綁定
$("#Pagination").pagination(<%=pageCount %>, {
callback: pageselectCallback,
prev_text: '< ',
next_text: ' >',
items_per_page: 20,
num_display_entries: 6,
current_page: pageIndex,
num_edge_entries: 2
});
}
</script>
這樣我們頁面所要進(jìn)行的操作就完成了，注釋都寫入上面了，如果有什么看不明白的，可以聯(lián)系我哦。下面我就要看看關(guān)鍵的GetData.ashx是如何進(jìn)行數(shù)據(jù)操作的，在這里先提示一下，我是用到了SqlHelper類進(jìn)行sql語句操作的，再輔以分頁的存儲(chǔ)過程，然后又用到Json.NET，將從數(shù)據(jù)庫得到的數(shù)據(jù)轉(zhuǎn)換成json，現(xiàn)在發(fā)現(xiàn)json真是個(gè)好東西的，操作起來比較簡(jiǎn)便。廢話不多說了呈上代碼，代碼還是有說服力的。雖然寫得比較簡(jiǎn)單。
復(fù)制代碼 代碼如下:
string strConn = ConfigurationManager.AppSettings["ConnectionString"];
//具體的頁面數(shù)
int pageIndex;
int.TryParse(context.Request["pageIndex"], out pageIndex);
//排序的依據(jù)
string orderType = "ProductID";
int sortType = 1;
if (!string.IsNullOrEmpty(context.Request["sortType"]))
{
string[] strArr = context.Request["sortType"].Split('_');
if (strArr[1] == "0")
{
orderType = strArr[0];
sortType = 0;
}
else
{
orderType = strArr[0];
sortType = 1;
}
}
if (pageIndex == 0)
{
pageIndex = 1;
}
//下面就是分頁的存儲(chǔ)過程了，把相應(yīng)的參數(shù)傳進(jìn)去就可以了。
System.Data.SqlClient.SqlParameter[] p =
{
SqlHelper.MakeOutParam("@Counts", SqlDbType.Int, 4),
SqlHelper.MakeInParam("@tblName", SqlDbType.VarChar, 128, "Products"),
SqlHelper.MakeInParam("@strGetFields", SqlDbType.VarChar,200, "ProductName,QuantityPerUnit"),
SqlHelper.MakeInParam("@fldName", SqlDbType.VarChar, 128, orderType),
SqlHelper.MakeInParam("@PageSize", SqlDbType.Int, 4, 20),
SqlHelper.MakeInParam("@PageIndex", SqlDbType.Int, 1, pageIndex),
SqlHelper.MakeInParam("@OrderType", SqlDbType.Bit, 1, sortType),
SqlHelper.MakeInParam("@strWhere", SqlDbType.VarChar, 1500, "")
};
DataTable dt = SqlHelper.ExecuteDataset(strConn, CommandType.StoredProcedure, "sp_PageCut", p).Tables[0];
int pageCount = Convert.ToInt32(p[0].Value.ToString());
//將得到的數(shù)據(jù)轉(zhuǎn)換成json
context.Response.Write(Util.DataTableToJSON(dt, "Products", pageCount));
下面我們看看DataTableToJson這個(gè)方法的代碼，這個(gè)比較簡(jiǎn)單，我也是看它的幫助文檔寫出來的，代碼的詳細(xì)說明就不說了。
public static string DataTableToJSON(DataTable dt, string tableName, int pageCount)
{
StringBuilder sb = new StringBuilder();
StringWriter sw = new StringWriter(sb);
using (JsonWriter jw = new JsonTextWriter(sw))
{
JsonSerializer ser = new JsonSerializer();
jw.WriteStartObject();
jw.WritePropertyName(tableName);
jw.WriteStartArray();
#region TableName屬性
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();
}
#endregion
jw.WriteEndArray();
jw.WriteEndObject();
sw.Close();
jw.Close();
}
return sb.ToString();
}
這樣我們的工作基本上就完成了，聲明綁定的table，然后在服務(wù)端獲取數(shù)據(jù)，再把得到的數(shù)據(jù)轉(zhuǎn)化成json，在頁面里面將數(shù)據(jù)綁定完成，一氣呵成真是不錯(cuò)，看得呈現(xiàn)的數(shù)據(jù)心里比較美吧，不過這個(gè)時(shí)候你也許會(huì)發(fā)現(xiàn)，頁面怎么只用一頁呢，嘻嘻，別忘了一點(diǎn)---就是取出數(shù)據(jù)的總數(shù)，用過分頁的都知道，是根據(jù)記錄的總數(shù)來計(jì)算到底有多少頁的哦。那么我們?cè)撛趺醋瞿兀?
其實(shí)比較簡(jiǎn)單哦，在頁面的Page_Load中得到數(shù)據(jù)的總數(shù)就可以了，然后將其進(jìn)行數(shù)據(jù)綁定，不信你去看看前面的代碼，是不是有句
復(fù)制代碼 代碼如下:
$("#Pagination").pagination(<%=pageCount %>這個(gè)就是起到了記錄總數(shù)的作用。
if (!IsPostBack)
{
SqlParameter[] p =
{
SqlHelper.MakeOutParam("@Counts", SqlDbType.Int, 4),
SqlHelper.MakeInParam("@tblName", SqlDbType.VarChar, 128, "Products"),
SqlHelper.MakeInParam("@strGetFields", SqlDbType.VarChar,200, "*"),
SqlHelper.MakeInParam("@fldName", SqlDbType.VarChar, 128, "ProductID"),
SqlHelper.MakeInParam("@PageSize", SqlDbType.Int, 4, 20),
SqlHelper.MakeInParam("@PageIndex", SqlDbType.Int, 1, 1),
SqlHelper.MakeInParam("@OrderType", SqlDbType.Bit, 1, 0),
SqlHelper.MakeInParam("@strWhere", SqlDbType.VarChar, 1500, "")
};
DataTable dt = SqlHelper.ExecuteDataset(conn, CommandType.StoredProcedure, "sp_PageCut", p).Tables[0];
pageCount = Convert.ToInt32(p[0].Value.ToString());
}
至此，整篇介紹如何利用jquery的插件---pagination進(jìn)行分頁就介紹到這里，簡(jiǎn)單的回顧一下就是聲明綁定的table，利用jquery的ajax方法進(jìn)行數(shù)據(jù)綁定的，然后在后臺(tái)得到數(shù)據(jù)轉(zhuǎn)換為json，整個(gè)流程就是這樣的，也許你會(huì)覺得這樣做比較繁瑣，不知你有何高見，可以在下面的評(píng)論為我點(diǎn)出，我不勝感激哦。^_^。寫博客真的是一件挺費(fèi)神的事情，不過在寫的過程中，又讓自己鞏固了一下這些知識(shí)，也是很不錯(cuò)的。就請(qǐng)各位看官評(píng)論吧。
經(jīng)過請(qǐng)教了美工了，把頁面中分頁的效果做成了gif圖片，大家看看圖吧。
JavaScript技術(shù)：jquery pagination插件實(shí)現(xiàn)無刷新分頁代碼，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
