jquery+json实现数据列表分页

标签： jquery json 数据 | 发表时间：2013-11-16 00:07 | 作者：zjx88
出处：http://blog.csdn.net

该实例中，新闻数据列表未使用表格显示。下面将所有源码附上，其中用到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>



作者：zjx88 发表于2013-11-15 16:07:22 原文链接
阅读：88 评论：0 查看评论

相关 [jquery json 数据] 推荐：

jquery+json实现数据列表分页

- - CSDN博客Web前端推荐文章
该实例中，新闻数据列表未使用表格显示. 下面将所有源码附上，其中用到jquery插件.