一步步打造漂亮的新聞列表(無刷新分頁、內(nèi)容預(yù)覽)第三章
2024-07-10 12:42:07
供稿：網(wǎng)友
我們來看一下需求分析：
3.==》無刷新的分頁讀取新聞列表，在點擊下一頁的時候觸發(fā)事件，調(diào)用ajax去數(shù)據(jù)庫中查找下一頁的數(shù)據(jù)并返回，然后顯示在頁面上。
這里面有兩個事件，都是js事件，我們用jquery代碼來實現(xiàn)。
分頁的話，我們采用jquery的分頁插件pagination，官方地址為http://plugins.jquery.com/project/pagination下載js文件和css文件（最下面附下載地址）
先講講它的基本用法：
跟一般的jQuery插件一樣，此插件使用也很簡單便捷。方法是pagination，例如$("#page").pagination(100);，這里的100參數(shù)是必須的，表示顯示項目的總個數(shù)，這是最簡單的使用。
例如下面的使用代碼：
代碼如下:
$("#Pagination").pagination(56, {
num_edge_entries: 2,
num_display_entries: 4,
callback: pageselectCallback,
items_per_page:1
});
這段代碼表示的含義是：總共有56(maxentries)個列表項，首尾兩側(cè)分頁顯示2(num_edge_entries)個，連續(xù)分頁主體數(shù)目顯示4(num_display_entries)個，回調(diào)函數(shù)為pageselectCallback(callback)，每頁顯示的列表項為 1(items_per_page)。您可以對照參數(shù)表修改配置這里的參數(shù)。
具體的用法可以參考官方文檔或是http://www.cnblogs.com/aosiyelong/archive/2010/03/30/1700262.html
然后講講如何將它整合到我們這邊來。
在NewsList.aspx頁面中添加相關(guān)的js文件和css文件（最下面附下載地址）：jquery-1.4.1.js，pagination.js
代碼如下:
<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代碼：
代碼如下:
<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",//數(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);
