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 相关文章推荐
javascript radio 联动效果
Mar 04 Javascript
JQuery为textarea添加maxlength属性的代码
Apr 07 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
vue中实现回车键登录功能
Feb 19 Javascript
用js实现放大镜效果
Oct 28 Javascript
vue中如何自定义右键菜单详解
Dec 08 Vue.js
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
如何开始收听短波广播
2021/03/01 无线电
ajax php 实现写入数据库
2009/09/02 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
php curl的深入解析
2013/06/02 PHP
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
python实现清屏的方法
2015/04/30 Python
Python二分法搜索算法实例分析
2015/05/11 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
带你认识Django
2019/01/15 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
Python面向对象之Web静态服务器
2019/09/03 Python
python numpy中cumsum的用法详解
2019/10/17 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
宿舍卫生检讨书
2014/01/16 职场文书
摄影助理岗位职责
2014/02/07 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
高三教师工作总结2015
2015/07/21 职场文书
初中班长竞选稿
2015/11/20 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
浅谈怎么给Python添加类型标注
2021/06/08 Python
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android