快捷導(dǎo)航

jquery+json實現(xiàn)數(shù)據(jù)列表分頁示例代碼

更新時間：2013年11月15日 17:15:49 作者：

該實例中，新聞數(shù)據(jù)列表未使用表格顯示，下面有個不錯的示例完美實現(xiàn)實現(xiàn)數(shù)據(jù)列表分頁，感興趣的朋友不要錯過

該實例中，新聞數(shù)據(jù)列表未使用表格顯示。下面將所有源碼附上，其中用到j(luò)query插件。

 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<c:set var="ctx" value="${pageContext.request.contextPath}" /> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Demo</title> 

<script type="text/javascript" src="easyui/jquery-1.8.0.min.js"></script> 

<script type="text/javascript" src="js/jquery.pagination.js"></script> 

<link rel="stylesheet" href="js/pagination.css" type="text/css"></link> 
<style type="text/css"> 
body { 
width: 100%; 
height: 100%; 
margin: 0 auto; 
padding: 0; 
background-color: #FFF; 
} 

#hen { 
background-color: #000; 
height: 50px; 
margin: 0px; 
padding: 12px 20px 2px 20px; 
border: #CCC double 1px; 
} 

.page { 
width: 1024px; 
margin: 20px auto; 
padding: 0; 
} 

#fm { 
margin: 0; 
padding: 10px 30px; 
} 

.ftitle { 
font-size: 14px; 
font-weight: bold; 
color: #666; 
padding: 5px 0; 
margin-bottom: 10px; 
border-bottom: 1px solid #ccc; 
} 

.fitem { 
margin-bottom: 5px; 
} 

.fitem label { 
display: inline-block; 
width: 80px; 
} 

A { 
text-decoration: none; 
} 

A:link { 
text－decoration: none; 
color: #000; 
} 

A:visited { 
color: #000; 
text－decoration: none 
} 

A:active { 
color: #000;; 
text－decoration: none 
} 

A:hover { 
text－decoration: none; 
color: red; 
} 

.d_over { 
background-color: #EFEFEF; 
} 

.d_out { 
background-color: #FFFFFF; 
} 
</style> 

<script type="text/javascript"> 
$(function(){//頁面加載時，進(jìn)行綁定 

bind(0); 
}); 

//點擊分頁時調(diào)用的函數(shù)，page_id為當(dāng)前頁的索引 
function pageselectCallback(page_id, jq) { 
bind(page_id); 
} 

function bind(pageIndex) 
{ 
var temp=""; 
var total=0; 
$.ajax({ 
type:"GET", 
url:"sys/news.do?method=findByTopic&page="+(pageIndex+1), 
async:false, ////作用是防止在ajax成功調(diào)用之前就調(diào)用$("#Pagination").pagination,這個時候數(shù)據(jù)個數(shù)還沒有初始化 
dataType:"json", 
data:"pageIndex="+(pageIndex+1),//傳遞頁面索引 
//發(fā)送請求前，顯示加載動畫 
beforeSend:function(){$("#divload").show();$("#datas #Pagination").hide()}, 
//請求完畢后，隱藏加載動畫 
complete:function(){$("#divload").hide();$("#datas #Pagination").show()}, 
success:function(data){ 
var json=data.rows;//json數(shù)據(jù) 
total=data.total;//記錄總數(shù) 
$.each(json,function(index,item){ 
temp+="<div id='datas' classdivclass=\"d_out\" onmouseover=\"this.className='d_over'\" "+ 
"onmouseout=\"this.className='d_out'\" style='padding: 10px 15px 12px 15px;'>"+ 
"<strong> <a style='font-size: 20px;' href='"+item.URL+"' target='_blank'>"+ 
item.title+"</a></strong>"+ 
"<div style='font-size: 14px; font-famliy: 宋體; text-indent: 2em; margin-top: 5px;'>"+ 
item.summary+" }</div></div><hr />"; 
}); 
$("#datas").html(temp); //將創(chuàng)建的新行附加在DIV中 
} 

}); 

if(total!=0){ 
//調(diào)用分頁函數(shù)，將分頁插件綁定到id為Pagination的div上 
$("#Pagination").pagination(total, { //recordCount在后臺定義的一個公有變量，通過從數(shù)據(jù)庫查詢記錄進(jìn)行賦值，返回記錄的總數(shù) 
callback: pageselectCallback, //點擊分頁時，調(diào)用的回調(diào)函數(shù) 
prev_text: '« 上一頁', //顯示上一頁按鈕的文本 
next_text: '下一頁 »', //顯示下一頁按鈕的文本 
items_per_page:10, //每頁顯示的項數(shù) 
num_display_entries:6, //分頁插件中間顯示的按鈕數(shù)目 
current_page:pageIndex, //當(dāng)前頁索引 
num_edge_entries:2 //分頁插件左右兩邊顯示的按鈕數(shù)目 

}); 
} 

} 
</script> 
</head> 
<body style=""> 
<!-- start header --> 
<div id="hen"> 
<div style="color: #FFF;"> 
<h1 style="font-size: 20px;"> 
實時動態(tài) 
</h1> 
</div> 
<div style="text-align: right;"> 
<a 
style="color: #FFF; margin: 5px; text－decoration: none; cursor: pointer;" 
href="index.jsp">返回首頁</a> 
</div> 
</div> 
<div class="page"> 
<div style="margin: 10px 0;"></div> 
<div id="datas"> 
</div> 
<div id="divload" style="text-align: center"> 
<img src="images/wait.gif" /> 
</div> 
<div id="Pagination" class="digg"></div> 
</div> 
<br /> 
<br /> 
</body> 
</html> 