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中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
ES6关于Promise的用法详解
May 07 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 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将向Java靠拢
2006/10/09 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
分享一个简单的python读写文件脚本
2017/11/25 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
美国汽车交易网站:Edmunds
2016/08/17 全球购物
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
戴尔美国官网:Dell
2016/08/31 全球购物
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
庆祝教师节活动方案
2014/01/31 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
电影圆明园观后感
2015/06/03 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL