jquery+json实现数据列表分页示例代码

前端技术 2023/09/08 JavaScript
该实例中，新闻数据列表未使用表格显示。下面将所有源码附上，其中用到jquery插件。
复制代码 代码如下:

<%@ 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(){//页面加载时，进行绑定

bind(0);
});

//点击分页时调用的函数，page_id为当前页的索引
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成功调用之前就调用$(\"#Pagination\").pagination,这个时候数据个数还没有初始化
dataType:\"json\",
data:\"pageIndex=\"+(pageIndex+1),//传递页面索引
//发送请求前，显示加载动画
beforeSend:function(){$(\"#divload\").show();$(\"#datas #Pagination\").hide()},
//请求完毕后，隐藏加载动画
complete:function(){$(\"#divload\").hide();$(\"#datas #Pagination\").show()},
success:function(data){
var json=data.rows;//json数据
total=data.total;//记录总数
$.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); //将创建的新行附加在DIV中
}

});

if(total!=0){
//调用分页函数，将分页插件绑定到id为Pagination的div上
$(\"#Pagination\").pagination(total, { //recordCount在后台定义的一个公有变量，通过从数据库查询记录进行赋值，返回记录的总数
callback: pageselectCallback, //点击分页时，调用的回调函数
prev_text: \'« 上一页\', //显示上一页按钮的文本
next_text: \'下一页 »\', //显示下一页按钮的文本
items_per_page:10, //每页显示的项数
num_display_entries:6, //分页插件中间显示的按钮数目
current_page:pageIndex, //当前页索引
num_edge_entries:2 //分页插件左右两边显示的按钮数目

});
}

}
</script>
</head>
<body style=\"\">
<!-- start header -->
<div id=\"hen\">
<div style=\"color: #FFF;\">
<h1 style=\"font-size: 20px;\">
实时动态
</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>

本文地址：https://www.stayed.cn/item/20960

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案