jQuery中jqGrid分页实现代码


Posted in Javascript onNovember 04, 2011

(1)页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<link rel="stylesheet" type="text/css" media="screen" 
href="js/themes/basic/grid.css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.jqGrid.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
jQuery("#myTab").jqGrid({ 
datatype: "json", //将这里改为使用JSON数据 
url:'DataServlet', //这是Action的请求地址 
mtype: 'POST', 
height: 250, 
width: 400, 
colNames:['编号','姓名', '电话'], 
colModel:[ 
{name:'id',index:'id', width:60, sorttype:"int"}, 
{name:'name',index:'name', width:90}, 
{name:'phone',index:'phone', width:100} 
], 
pager: 'pager', //分页工具栏 
imgpath: 'js/themes/basic/images', //图片存放路径 
rowNum:10, //每页显示记录数 
viewrecords: true, //是否显示行数 
rowList:[10,20,30], //可调整每页显示的记录数 
multiselect: false, //是否支持多选 
caption: "信息显示" 
}); 
}); 
</script> 
</head> 
<body> 
<table id="myTab" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="pager" class="scroll"></div> 
</body> 
</html>

(2)后台的servlet,里面的数据是模拟的
/** 
* Servlet implementation class DataServlet 
*/ 
public class DataServlet extends HttpServlet { 
private static final long serialVersionUID = 1L; /** 
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse 
* response) 
*/ 
protected void doGet(HttpServletRequest request, 
HttpServletResponse response) throws ServletException, IOException { 
// TODO Auto-generated method stub 
} 
/** 
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse 
* response) 
*/ 
protected void doPost(HttpServletRequest request, 
HttpServletResponse response) throws ServletException, IOException { 
String page = request.getParameter("page"); // 取得当前页数,注意这是jqgrid自身的参数 
String rows = request.getParameter("rows"); // 取得每页显示行数,,注意这是jqgrid自身的参数 
int totalRecord = 80; // 总记录数(应根据数据库取得,在此只是模拟) 
int totalPage = totalRecord % Integer.parseInt(rows) == 0 ? totalRecord 
/ Integer.parseInt(rows) : totalRecord / Integer.parseInt(rows) 
+ 1; // 计算总页数 
try { 
int index = (Integer.parseInt(page) - 1) * Integer.parseInt(rows); // 开始记录数 
int pageSize = Integer.parseInt(rows); 
// 以下模拟构造JSON数据对象 
String json = "{total: " + totalPage + ", page: " + page 
+ ", records: " + totalRecord + ", rows: ["; 
for (int i = index; i < pageSize + index && i < totalRecord; i++) { 
json += "{cell:['ID " + i + "','NAME " + i + "','PHONE " + i 
+ "']}"; 
if (i != pageSize + index - 1 && i != totalRecord - 1) { 
json += ","; 
} 
} 
json += "]}"; 
response.getWriter().write(json); // 将JSON数据返回页面 
} catch (Exception ex) { 
} 
} 
}

目录结构:

jQuery中jqGrid分页实现代码
 展现的效果:

jQuery中jqGrid分页实现代码
 http://blog.csdn.net/polaris1119/archive/2010/01/04/5130974.aspx

http://d.download.csdn.net/down/1142295/ctfzh

http://hi.baidu.com/fangle_life/blog/item/1076b6fa85a9ba1c6d22eb1e.html

http://blog.csdn.net/polaris1119/archive/2010/01/12/5183327.aspx

Javascript 相关文章推荐
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 Javascript
uniapp实现横向滚动选择日期
Oct 21 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 Javascript
JS class语法糖的深入剖析
Jul 07 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 #Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 #Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 #Javascript
关于URL中的特殊符号使用介绍
Nov 03 #Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 #Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 #Javascript
遍历jquery对象的代码分享
Nov 02 #Javascript
You might like
php session 检测和注销
2009/03/16 PHP
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
php实现网站留言板功能
2015/11/04 PHP
php输出图像的方法实例分析
2017/02/16 PHP
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python修改注册表终止360进程实例
2014/10/13 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
用python进行视频剪辑
2020/11/02 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
疾病防治方案
2014/05/31 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
辞职信范文大全
2015/03/02 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
Python音乐爬虫完美绕过反爬
2021/08/30 Python
Python中递归以及递归遍历目录详解
2021/10/24 Python
MySQL 数据类型详情
2021/11/11 MySQL
vue 给数组添加新对象并赋值
2022/04/20 Vue.js