- 浏览: 753617 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (241)
- 个人思考 (1)
- 数据库 (5)
- java基础 (32)
- 软件工程 (2)
- zk开源框架 (15)
- 设计模式 (25)
- javascript (12)
- css (9)
- UML (2)
- CMMI软件需求 (3)
- CMMI软件设计 (2)
- CMMI软件实现 (1)
- CMMI软件测试 (1)
- 正则表达式 (4)
- 系统日志配置 (4)
- 应用服务器 (1)
- spring (7)
- XML (6)
- java web (10)
- Ajax (3)
- RichFaces (14)
- 问题 (1)
- 评论文章 (2)
- fushioncharts (2)
- MAVN (4)
- jquery (26)
- Ext js学习 (2)
- 学习心得 (2)
- CSS兼容问题 (3)
- XSL-FOP (1)
- Quartz (0)
- OSGI (1)
- spring--security (6)
- apache tools (1)
- eclispe 小技巧 (2)
- Ant (1)
- 杂记 (1)
- spring3系列 (5)
- java cache (4)
- EffectiveJava (2)
- 代码重构 (0)
最新评论
-
psz6696:
可以说是超级简单的Demo了,可惜没有演示设值注入和构造注入两 ...
模拟spring中的ClassPathXmlApplicationContext类的实现 -
ziyourJava:
[flash=200,200][img][url][list] ...
spring security进级篇 V 自定义标签控制显示 -
ztw1122:
...
zk组件开发指南(目录) -
zjysuv:
容我说一句 在座的各位都是垃圾 spring 3.2以后的@C ...
三. spring mvc 异常统一处理 -
chengwu1201:
二 基于Spring的异常体系处理
今天看到javaeye上有人使用了jqGrid实现了数据的分页,参考它的代码,实现了这个功能,搬出来晒晒,作为自己以后学习的资料!
(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) { } } }
目录结构:
展现的效果:
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
评论
5 楼
赵武艺
2012-11-26
麻烦可以给一下项目的源码吗?wuyixiwen@sina.com谢谢!
4 楼
learnJ2ME
2012-06-06
一开始我也遇到JSON数据显示不出来
之后我才顺序改为如下
url:'DataServlet', //这是Action的请求地址
datatype: "json", //将这里改为使用JSON数据
再因需要,我添加
shrinkToFit: true,
jsonReader: {
repeatitems: false
},
之后我才顺序改为如下
url:'DataServlet', //这是Action的请求地址
datatype: "json", //将这里改为使用JSON数据
再因需要,我添加
shrinkToFit: true,
jsonReader: {
repeatitems: false
},
3 楼
carry_tang1978
2012-05-11
我们项目已经把jqgrid封装成标签,搜索、排序、分页都已经封装好,使用很简单
<common:DataGrid rowNum="50" rowList="20,50,200" columnMove="true"
pkColumn="dictId" autoSize="true" id="mytable"
action='/sysmgr/dict/queryDictList_Dictmgr.action' autoload="true">
<common:Column property="dictId" title="字段id" pk="1" sortable="false"
hidden="true"></common:Column>
<common:Column property="dictIndex" title="序号" dbFieldName="DICT_INDEX" width="60"
sortable="true"></common:Column>
<common:Column property="dictCode" title="字段编码" dbFieldName="DICT_CODE" width="120"
sortable="true"></common:Column>
<common:Column property="dictName" title="字段名称" dbFieldName="DICT_NAME" width="120"
sortable="true"></common:Column>
</common:DataGrid>
不需要写脚本,使用很方便
<common:DataGrid rowNum="50" rowList="20,50,200" columnMove="true"
pkColumn="dictId" autoSize="true" id="mytable"
action='/sysmgr/dict/queryDictList_Dictmgr.action' autoload="true">
<common:Column property="dictId" title="字段id" pk="1" sortable="false"
hidden="true"></common:Column>
<common:Column property="dictIndex" title="序号" dbFieldName="DICT_INDEX" width="60"
sortable="true"></common:Column>
<common:Column property="dictCode" title="字段编码" dbFieldName="DICT_CODE" width="120"
sortable="true"></common:Column>
<common:Column property="dictName" title="字段名称" dbFieldName="DICT_NAME" width="120"
sortable="true"></common:Column>
</common:DataGrid>
不需要写脚本,使用很方便
2 楼
yy159632
2012-03-08
怎么我的JSON数据还是显示不出来啊,都跟LZ的一模一样了,就URL不同了,后台返回的JSON格式,和前台jqGrid代码都是copy的
1 楼
christy_fang
2011-05-05
太棒了!非常感谢LZ啊!
发表评论
-
基于jquery的半透明tip的实现
2012-04-25 18:23 2627趁工作之余,做了一个半透明的tooltip组件,show一下 ... -
jquery 开源的网站
2011-07-29 16:58 1265http://www.open-lib.com/ http ... -
js 函数
2011-07-27 19:20 1204js 中的数据类型: 字符串、数字、布尔值、空值、未定 ... -
10个实用的jQuery代码片段
2011-07-08 15:51 1148作者:Ei Sabai 翻 ... -
分享50个使你成为高级javascript开发者的jQuery的代码开发技巧
2011-07-08 15:34 1356英文: 50 jQuery Snippets T ... -
Sexy_Page_Curls插件
2010-01-12 15:09 1080不错的插件! -
jquery表格常用操作(转帖)
2010-01-12 14:46 2901就table的一些常用操作做了一个综合的例子,包括行条纹 高亮 ... -
jquery 技巧
2010-01-11 11:38 1269JQuery是个不错的框架,以下总结了5个每个网站开发者都应该 ... -
jQuery实现的日历
2010-01-07 14:19 1401看一下效果: -
jquery做的无限级菜单
2010-01-07 13:45 3416/** *栏目树分级显示下拉菜单组件 *作者:Cand ... -
jQuery插件开发全解析
2009-12-10 22:22 2790jQuery插件的开发包括两种: 一种是类级别的插件开发,即 ... -
jQuery treeview 实现的树组件
2009-12-09 21:10 6297今天利用jQuery的l ... -
jQuery treeview在JSP中的应用:ASYNC
2009-12-09 17:10 39071. async.jsp <%@ page lan ... -
jQuery treeview 在jsp中的应用
2009-12-09 17:08 29882. navigation.jsp <%@ page ... -
jQuery做的layout组件
2009-12-07 21:24 4657jQuery layout是一款不错的页面布局组件 ... -
jquery实现的treetable组件展现
2009-12-07 21:05 6022最近,利用richfaces做的treetale组 ... -
JQuery基础教程学习第五章笔记
2009-11-17 16:39 12991、attr()函数。在改变多个属性的时候可以采用键值对的形式 ... -
JQuery基础教程学习第四章笔记
2009-11-17 16:13 12761、css()方法可以修改或取值,写法如下:(1)获取css的 ... -
jQuery封装的组件
2009-11-17 15:58 4048jQuery分装的实用组件! -
绚丽的jquery按钮
2009-11-16 23:25 5526绚丽的UI按钮
相关推荐
今天看到javaeye上有人使用了jqGrid实现了数据的分页,参考它的代码,实现了这个功能,搬出来晒晒,作为自己以后学习的资料
利用jquery实现表格动态分页,前台用jquery实现。后台用java实现动态查询数据,分页。
<script type="text/javascript" src="js/jquery.jqGrid.min.js"> <script type="text/javascript" src="js/jquery.tablednd.js"> <script type="text/javascript" src="js/jquery.contextmenu.js"> ...
jquery.jqGrid-4.4.3,用于web页面的列表分页显示
本Demo利用Jquery的jqgrid插件利用本地资源数据,实现分页。
jqGrid是一个Ajaxed jQuery Grid插件。提供分页功能,添加、编辑、删除和搜索表中记录,支持多种数据类型输入:XML,JSON,Array等,多行选择,支持子表格,集成日期选择控件等等。
jqGrid是一个Ajaxed jQuery Grid插件。提供分页功能,添加、编辑、删除和搜索表中记录,支持多种数据类型输入:XML,JSON,Array等,多行选择,支持子表格,集成日期选择控件等等
jqGrid源码,可以参考教材使用,出现问题可以联系我
JqGrid是一款功能强大的Jquery表格控件,支持排序,分组,分页,行内编辑,表格树,行内表格等多种功能,该版本为官方最新版,附带Demo
jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。 一、要引用的文件 要使用jqGrid,首先页面上要引入如下css与js文件。 1、css <link href=/css/ui...
详细的 mvc_利用jquery-temp.min.js实现分页查询代码和数据库
一个jqGrid例子 使用datatype: "local",JSON数据写在页面中时分页、搜索一切正常。 但使用datatype: getProducts, 时点击搜索、排序时数据每次拷贝了一份,(即:原数据有10条,操作后就成20条。。。。)。
好用的jquery表格插件jqGrid。 本压缩包含源码和DEMO,还有一个3.4的DOC。
本例程,主要是,用jqgrid 实现grid及subgrid数据列表的分页,增,删,改,查,定制显示列的功能 用jqueryUI 实现 上下左的布局 数据库及源码都在上传的RAR包中 由于上传空间的问题,JAR包不做上传,大家可以自己...
GridView显示数据,无刷新分页,无刷新排序,无刷新过滤(搜索数据),基于ASP.NET(我们这里有ashx一般处理文件来实现)。 $.ajax({ type: p.method, url: p.url, data:param, success: function(msg){ $.Add...
bootstrap-table:基于 Bootstrap 的 jQuery 表格插件,通过简单的设置就可以拥有强大的单选、多选、排序、分页、编辑、导出、过滤(扩展)等功能
jqGrid 是一个用来显示网格数据的jQuery插件,文档比较全面,附带中文版本。 主要特点: -Full control with JavaScript API -Data returned from the server is XML -Simple configuration -Ability to load big ...
内容索引:脚本资源,jQuery,jqGrid jqGrid是一个jQuery Grid插件,是客户端加载数据解决方案,有着优秀的界面和提供了良好的文档,它可以使用任何服务器端语言,ASP、PHP、、JSP等等。它的一个好用的功能是提供灵活...