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 相关文章推荐
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
一个简单的js鼠标划过切换效果
Jun 30 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
解决vue组件中click事件失效的问题
Nov 09 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
php 全文搜索和替换的实现代码
2008/07/29 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
python time模块用法实例详解
2014/09/11 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
python提取log文件内容并画出图表
2019/07/08 Python
Python如何计算语句执行时间
2019/11/22 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
十八大感想感言
2014/02/10 职场文书
初中学校对照检查材料
2014/08/19 职场文书
2014年少先队工作总结
2014/12/03 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
机器人总动员观后感
2015/06/09 职场文书
总经理年会致辞
2015/07/29 职场文书
python实现简单的名片管理系统
2021/04/26 Python
Django如何与Ajax交互
2021/04/29 Python
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技
vue实现滑动解锁功能
2022/03/03 Vue.js