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中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
javascript截取字符串小结
Apr 28 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 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.MVC的模板标签系统(二)
2006/09/05 PHP
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
JavaScript的parseInt 取整使用
2011/05/09 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
Python计算回文数的方法
2015/03/11 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
Python实现代码块儿折叠
2020/04/15 Python
python 5个顶级异步框架推荐
2020/09/09 Python
python+opencv实现车道线检测
2021/02/19 Python
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
乒乓球兴趣小组活动总结
2014/07/08 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
Python数据结构之队列详解
2022/03/21 Python