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

2024-05-06 15:55:10

字體：大中小

供稿：網(wǎng)友

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

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

復(fù)制代碼代碼如下:

<%@ 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 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ǎn)擊分頁時調(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 classdivclass=/"d_out/" onmouseover=/"this.className='d_over'/" "+
"onmouseout=/"this.className='d_out'/">"+
"<strong> <a href='"+item.URL+"' target='_blank'>"+
item.title+"</a></strong>"+
"<div>"+
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ǎn)擊分頁時，調(diào)用的回調(diào)函數(shù)
prev_text: '« 上一頁', //顯示上一頁按鈕的文本
next_text: '下一頁 »', //顯示下一頁按鈕的文本
items_per_page:10, //每頁顯示的項(xiàng)數(shù)
num_display_entries:6, //分頁插件中間顯示的按鈕數(shù)目
current_page:pageIndex, //當(dāng)前頁索引
num_edge_entries:2 //分頁插件左右兩邊顯示的按鈕數(shù)目

});
}

}
</script>
</head>
<body>

<div>
<div>
<h1>
實(shí)時動態(tài)
</h1>
</div>
<div>
<a
style="color: #FFF; margin: 5px; text－decoration: none; cursor: pointer;"
href="index.jsp">返回首頁</a>
</div>
</div>
<div>
<div></div>
<div>
</div>
<div>
<img src="images/wait.gif" />
</div>
<div></div>
</div>
<br />
<br />
</body>
</html>