快捷導(dǎo)航

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

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

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

該實(shí)例中，新聞數(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(){//頁(yè)面加載時(shí)，進(jìn)行綁定 

bind(0); 
}); 

//點(diǎn)擊分頁(yè)時(shí)調(diào)用的函數(shù)，page_id為當(dāng)前頁(yè)的索引 
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,這個(gè)時(shí)候數(shù)據(jù)個(gè)數(shù)還沒(méi)有初始化 
dataType:"json", 
data:"pageIndex="+(pageIndex+1),//傳遞頁(yè)面索引 
//發(fā)送請(qǐng)求前，顯示加載動(dòng)畫(huà) 
beforeSend:function(){$("#divload").show();$("#datas #Pagination").hide()}, 
//請(qǐng)求完畢后，隱藏加載動(dòng)畫(huà) 
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)用分頁(yè)函數(shù)，將分頁(yè)插件綁定到id為Pagination的div上 
$("#Pagination").pagination(total, { //recordCount在后臺(tái)定義的一個(gè)公有變量，通過(guò)從數(shù)據(jù)庫(kù)查詢記錄進(jìn)行賦值，返回記錄的總數(shù) 
callback: pageselectCallback, //點(diǎn)擊分頁(yè)時(shí)，調(diào)用的回調(diào)函數(shù) 
prev_text: '« 上一頁(yè)', //顯示上一頁(yè)按鈕的文本 
next_text: '下一頁(yè) »', //顯示下一頁(yè)按鈕的文本 
items_per_page:10, //每頁(yè)顯示的項(xiàng)數(shù) 
num_display_entries:6, //分頁(yè)插件中間顯示的按鈕數(shù)目 
current_page:pageIndex, //當(dāng)前頁(yè)索引 
num_edge_entries:2 //分頁(yè)插件左右兩邊顯示的按鈕數(shù)目 

}); 
} 

} 
</script> 
</head> 
<body style=""> 
<!-- start header --> 
<div id="hen"> 
<div style="color: #FFF;"> 
<h1 style="font-size: 20px;"> 
實(shí)時(shí)動(dòng)態(tài) 
</h1> 
</div> 
<div style="text-align: right;"> 
<a 
style="color: #FFF; margin: 5px; text－decoration: none; cursor: pointer;" 
href="index.jsp">返回首頁(yè)</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> 