利用ajax完成無刷新分頁的功能 aspx+ashx 動軟三層 分頁存儲過程
首先寫出分頁最好用一下存儲過程
--存儲過程 create proc usp_GetPagedPhotos @pageIndex int, @pageSize int, @pageCount int output as declare @n int select @n=COUNT(*) from Photos set @pageCount = CEILING(@n*1.0/@pageSize) --ceiling 天花板 把浮點型以小數點分割左邊整數加一取整 2.1→3 @n*1.0轉換成浮點型除以一個整數就可以是一個浮點型數了 select * from (select *,ROW_NUMBER() over(order by ptime desc) as num from Photos) as t where num between (@pageIndex-1)*@pageSize + 1 and @pageIndex*@pageSize order by PTime desc
--這樣就可以通過輸入第幾頁，一頁有多少條數據可以得出要顯示的數據以及返回一共有多少頁
DAL層（調用動軟代碼生成器的dbsqlhelper執行存儲過程）
public DataSet GetPagedData(int pageIndex, int pageSize, out int pageCount)
{
SqlParameter[] param = {
new SqlParameter("@pageIndex",SqlDbType.Int),
new SqlParameter("@pageSize",SqlDbType.Int),
new SqlParameter("@pageCount",SqlDbType.Int)
};
//設置輸入參數
param[0].Value = pageIndex;
param[1].Value = pageSize;
//設置輸出參數
param[2].Direction = ParameterDirection.Output;
DataSet ds = Maticsoft.DBUtility.DbHelperSQL.RunProcedure("usp_GetPagedPhotos", param, "photos");
//執行完存儲過程，獲取輸出參數的值
pageCount = Convert.ToInt32(param[2].Value);
return ds;
}
BLL 層（ 轉成泛型集合，調用動軟生成的 datatable to list方法）
public List<Photos> GetPagedData(int pageIndex, int pageSize, out int pageCount)
{
DataSet ds = dal.GetPagedData(pageIndex, pageSize, out pageCount);
return DataTableToList(ds.Tables[0]);
}
個人比較喜歡先寫ashx頁面 ，想：ajax用json數據比較好 而且c#里有專門處理list to json的一個良好的機制方法 Serialize （內部原理就是object to string,序列化）
PhotosBLL bll = new PhotosBLL();
//准備傳過來的參數
int index=int.Parse(context.Request.QueryString["index"]);
int pagesize=int.Parse(context.Request.QueryString["page"]);
//准備輸出的總頁數
int count;
List<Photos> list = bll.GetPagedData(index, pagesize, out count);
JavaScriptSerializer jss = new JavaScriptSerializer();
//將泛型集合轉換成json對象
string json = jss.Serialize(list);
//[{"key":value,"key":value},{"key":value,"key":value}]
//此時的json對象里沒有總頁數，所以要把總頁數拼接到json對象中進行傳遞,拼接的時候要注意json對象的格式
json = json.Replace("]",",{\"count\":"+count+"}]");
//[{"key":value,"key":value},{"key":value,"key":value},{"count":4}]
context.Response.Write(json);
現在開始寫jquery ajax
html結構
<div id="left"> <img src="../images/1.gif" /></div> <div id="right"> <div id="p"> </div> <br /> <div id="page"> <ul> <li><a href="#" id="firstpage">首頁</a></li> <li><a href="#" id="beforepage">上一頁</a></li> <li><a href="#" id="nextpage">下一頁</a></li> <li id="pagelist"><a href="#">1</a><a href="#">2</a><a href="#">3</a></li> <li>當前頁： <span id="pages"></span> </li> <li><a href="#" id="lastpage">尾頁</a></li> </ul> </div> </div> <div class="coverholder"> <input type="text" /> <input type="button" id="btn1" value="cancel" /> </div>
重量級人物來了jquery ajax
第一次加載頁面，寫成方法，傳入index（第幾頁） page(一頁幾條數據)
function loadps(index, page) { //$.getJSON ,$.get ,$.post 是對$.ajax 的一個封裝 這里傳過來的是json數據源 用$.getJSON 最好 $.getJSON("GetPagedAjax.ashx?" + Math.random(), { "index": index, "page": page }, function (json) { //獲取頁數，為全局變量賦值 pagesize = json[json.length - 1].count; //動態生成表格 var $tb = $("<table id='tbPhotos'></table>"); $("#p").append($tb); var $th = $("<tr><th>序號</th><th>標題</th><th>圖片</th><th>點擊次數</th><th>支持</th><th>反對</th><th>時間</th><th>操作</th></tr>"); $tb.append($th); //過濾掉最后一個非數據源 json.length - 1 for (var i = 0; i < json.length - 1; i++) { var $tr = $("<tr></tr>"); $tb.append($tr); //第一個td var $td = $("<td>" + (i + 1) + "</td>"); $tr.append($td); // $td = $("<td><a href='04-PhotoDetails.aspx?pid=" + json[i].PId + "'>" + json[i].PTitle + "</a></td>"); $tr.append($td); // $td = $("<td><img src='../images/" + json[i].PUrl + "' width='150px'/></td>"); $tr.append($td); // $td = $("<td>" + json[i].PClicks + "</td>"); $tr.append($td); $td = $("<td><a pid='" + json[i].PId + "' href='#'><img src='gif/85.gif' /><span>" + json[i].PUp + "</span></a></td>"); $tr.append($td); $td = $("<td><a pid='" + json[i].PId + "' href='#'><img src='gif/86.gif' /><span>" + json[i].PDown + "</span></a></td>"); $tr.append($td); //注意此時的時間轉換，這里我寫了一個方法(ChangeDateFormat(time))在外面，下面會寫出來 $td = $("<td>" + ChangeDateFormat(json[i].PTime) + "</td>"); $tr.append($td); // $td = $("<td>編輯 刪除</td>"); $tr.append($td); //顯示當前頁面 $("#pages").text(index + "/" + pagesize); } }); }
補充方法（小問題，小麻煩）ChangeDateFormat(time)
//轉換正確的時間格式 function ChangeDateFormat(cellval) { var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10)); var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); return date.getFullYear() + "-" + month + "-" + currentDate; }
動態生成表格的拼接過程很無聊……
在頁面加載的時候加載該方法
總的代碼結構如下：
<script type="text/javascript">
//定義三個全局變量 index page pagesize, 並賦初值，注意:盡量少使用全局變量，全局變量的作用域在整個JS文件里。
//特別是在引用其它外部JS的時候，如果外部JS里有申明了這個變量了，就會出現沖突。本次為了方便理解才使用的。jquery里一般是使用匿名方法所以就沒有考慮。
//定義全局變量是為了點擊下一頁的時候可以記錄當前的index
//index 第幾頁， page 每頁幾條 pagesize 一共有幾頁。
var index = 1;
var page = 4;
//首次加載頁面
loadps();
//頁面總數 ,首次加載的時候就為 pagesize 賦值了
var pagesize = 0;
function loadps()｛……｝
$(function ()｛……｝); //寫上一頁，下一頁等點擊事件
</script>
現在寫相關事件
$(function () { //首頁 $('#firstpage').click(function () { if (index != 1) { index = 1; loadps(); } return false; }); //尾頁 $('#lastpage').click(function () { if (index != pagesize) { index = pagesize; loadps(); } return false; }); //上一頁 $("#beforepage").click(function () { if (index != 1) { index = index - 1; loadps(); } return false; }); //下一頁 $("#nextpage").click(function () { if (index < pagesize) { index = index + 1; loadps(); } return false; }); })
總結：感覺上面原來ajax就這點東西，不過就是拿數據，拼接表格，顯示。重點就只有 $.getJSON 方法的使用、處理JSON數據和用jquery拼接表格 不過小細節也應該注意。
jquery 里的ajax方法，它把js里的創建xmlhttprequest對象的過程大大的簡化了。
最重要的最簡單的是利用json數據，json簡化對字符串的處理，它是以對象的方式進行傳遞的，而C#也對它作以迎合，我們何簡而不為呢？