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


Posted in Javascript onNovember 15, 2013

该实例中,新闻数据列表未使用表格显示。下面将所有源码附上,其中用到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>
Javascript 相关文章推荐
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 #Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 #Javascript
js螺旋动画效果的具体实例
Nov 15 #Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 #Javascript
JS读取XML文件示例代码
Nov 15 #Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 #Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 #Javascript
You might like
phpmyadmin操作流程
2006/10/09 PHP
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
js几个验证函数代码
2010/03/25 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
JS数据类型判断的几种常用方法
2020/07/07 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
深入探究Django中的Session与Cookie
2017/07/30 Python
利用python计算时间差(返回天数)
2019/09/07 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
python程序需要编译吗
2020/06/19 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
what is the difference between ext2 and ext3
2013/11/03 面试题
自考毕业自我鉴定范文
2013/10/27 职场文书
优秀研究生自我鉴定
2013/12/04 职场文书
运动会入场词60字
2014/02/15 职场文书
大跃进口号
2014/06/16 职场文书
党员十八大心得体会
2014/09/12 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
暑期家教宣传单
2015/07/14 职场文书
导游词之无锡东林书院
2019/12/11 职场文书