`

【转】 jqGrid基础学习:jqGrid中使用分页

 
阅读更多

转至:http://blog.csdn.net/yangbobo1992/article/details/7929772

作者:yangbobo1992

 

jqGrid分页首先要在页面设置一个DIV的层。

 

 

 

同时,要在jqGrid的配置中加入

 

jQuery("#grid_id").jqGrid({

...

   pager : '#pager',

...

});

参照第二章
效果如下


分页实例

 

同时,这jqGrid中,在分页可以设定各种属性,例如没有找到数据时显示的提示。

 

jQuery("#grid_id").jqGrid({

...

   pager : '#pager',

   emptyrecords: "Nothing to display",

...

});

而这些,也可以再i18n的文件中进行配置。很少这样直接更改。系统默认的显示是

 

recordtext: "View {0} - {1} of {2}",

                emptyrecords: "No records to view",

                loadtext: "Loading...",

                pgtext : "Page {0} of {1}"

在分页导航条中,还可以对属性进行修改,分页导航的属性有

属性名 类型 说明 默认值 是否可以被修改
lastpage integer 只读属性,总页数 0 NO
pager mixed 导航栏对象,必须是一个有效的html元素,位置可以随意 空字符串 NO
pagerpos string 定义导航栏的位置,默认分为三部分:翻页,导航工具及记录信息 center NO
pgbuttons boolean 是否显示翻页按钮 true NO
pginput boolean 是否显示跳转页面的输入框 true NO
pgtext string 页面信息,第一个值是当前页第二个值是总页数 语言包 YES
reccount integer 只读属性,实际记录数,千万不能跟records 参数搞混了,通常情况下他们是相同的,假如我们定义rowNum=15,但我们从服务器端返回的记录为20即records=20,而reccount=15,表格中也显示15条记录。 0 NO
recordpos string 定义记录信息的位置,可选值:left, center, right right NO
records integer 只读属性,从服务器端返回的记录数 none NO
recordtext string 显示记录的信息,只有当viewrecords为true时起效,且记录数必须大于0 语言包 yes
rowList array[] 可以改变表格可以显示的记录数,格式为[10,20,30] 空array[] no
rowNum integer 设置表格可以显示的记录数 20 yes
viewrecords boolean 是否要显示总记录数信息 false no

所有这些参数都是可以修改的,比如:

 

<script>

...

jQuery("#grid_id").setGridParam({rowNum:10}).trigger("reloadGrid");

...

</script>

 

同时,分页有一个事件,很少需要用到

事件名 参数 说明
onPaging pgButton 当点击翻页按钮但还为展现数据时触发此事件,当然这跳转栏输入页码改变页时也同样触发此事件。参数pgButton可选值:
first,last,prev,next

同时要注意和后台的交互。jqGrid在分页的时候向后台传递的参数有

 

        /*

         * 分页

         */

        private Integer page;// 当前页

        private Integer total;// 总页数

        private Integer pageSize = 20;// 每页显示多少

        private Integer records;// 总记录数

        private List<studentbean> rows;// 记录

</studentbean>

 

所以,我们可以通过书写一份分页公共类来进行。
分页Bean

 

public class Page {


        private int count = 0; // 记录总数


        private int pageSize = 20; // 每页显示记录数


        private int pageCount = 0; // 总页数


        private int page = 1; // 当前页数


        private String totalCountSQL;// 得到总记录数sql语句


        private String listSQL;// 得到查询记录sql语句


        public int getCount() {

                return count;

        }


        public void setCount(int count) {

                this.count = count;

        }


        public int getPageSize() {

                return pageSize;

        }


        public void setPageSize(int pageSize) {

                this.pageSize = pageSize;

        }


        public int getPageCount() {

                return pageCount;

        }


        public void setPageCount(int pageCount) {

                this.pageCount = pageCount;

        }


        public int getPage() {

                return page;

        }


        public void setPage(int page) {

                this.page = page;

        }


        public String getTotalCountSQL() {

                return totalCountSQL;

        }


        public void setTotalCountSQL(String totalCountSQL) {

                this.totalCountSQL = totalCountSQL;

        }


        public String getListSQL() {

                return listSQL;

        }


        public void setListSQL(String listSQL) {

                this.listSQL = listSQL;

        }


}

 

分页的接口

 

public interface IPage {


        public List getList(PageBean page);

        public List getList(PageBean page, Map param);


        public Long getTotalCount(PageBean p,Map param);


        public Long getTotalCount(PageBean page);


}

分页实现

 

@Service("page")

@SuppressWarnings("unchecked")

public class PageImpl implements IPage {

        @Resource

        private SessionFactory sessionFactory;


        public List getList(PageBean page) {

                Query query = sessionFactory.getCurrentSession().createQuery(

                                page.getListSQL());

                query.setMaxResults(page.getPageSize());

                query.setFirstResult((page.getPage() - 1) * page.getPageSize());

                return query.list();

        }


        public List getList(PageBean page, Map param) {


                Query query = sessionFactory.getCurrentSession().createQuery(

                                page.getListSQL());

                if (null != param) {

                        Iterator it = param.entrySet().iterator();

                        while (it.hasNext()) {

                                Map.Entry entry = (Map.Entry) it.next();

                                String key = (String) entry.getKey();

                                Object val = entry.getValue();

                                query.setParameter(key, val);


                        }

                }

                return query.list();

        }


        public Long getTotalCount(PageBean p, Map param) {

                Query query = sessionFactory.getCurrentSession().createQuery(p.getTotalCountSQL());

                if (null != param) {

                        Iterator it = param.entrySet().iterator();

                        while (it.hasNext()) {

                                Map.Entry entry = (Map.Entry) it.next();

                                String key = (String) entry.getKey();

                                Object val = entry.getValue();

                                query.setParameter(key, val);


                        }

                }

                return (Long) query.uniqueResult();

        }


        public Long getTotalCount(PageBean p) {


                return (Long) sessionFactory.getCurrentSession().createQuery(p.getTotalCountSQL()).uniqueResult();

        }


}

Action类完整代码

 

@ParentPackage("json-default")

@Namespace("/admin/json")

public class StudentListAction implements ServletRequestAware {


        @Resource

        private IPaginate paginate;

        private HttpServletRequest request;


        /*

         * 分页

         */

        private Integer page;// 当前页

        private Integer total;// 总页数

        private Integer pageSize = 20;// 每页显示多少

        private Integer records;// 总记录数

        private List<studentbean> rows;// 记录


        public StudentListAction() {

                System.out.println(new Date());


        }


        public Integer getPage() {

                return page;

        }


        public void setPage(Integer page) {

                this.page = page;

        }


        public Integer getTotal() {

                return total;

        }


        public void setTotal(Integer total) {

                this.total = total;

        }


        @JSON(serialize = false)

        public Integer getPageSize() {

                return pageSize;

        }


        public void setPageSize(Integer pageSize) {

                this.pageSize = pageSize;

        }


        public Integer getRecords() {

                return records;

        }


        public void setRecords(Integer records) {

                this.records = records;

        }


        public List</studentbean><studentbean> getRows() {

                return rows;

        }


        public void setRows(List</studentbean><studentbean> rows) {

                this.rows = rows;

        }


        public void setServletRequest(HttpServletRequest request) {

                this.request = request;


        }


        @Action(value = "jsondata", results = { @Result(type = "json") })

        public String execute() throws Exception {

                get();


                return com.opensymphony.xwork2.Action.SUCCESS;

        }


        @SuppressWarnings("unchecked")

        private void get() throws Exception {

                PageBean pageBean = new PageBean();

                pageBean.setPage(page);

                pageBean.setPageSize(pageSize);

                JqGridHandler handler = new JqGridHandler(request);

                pageBean.setTotalCountSQL("select count(*) from Student "

                                + handler.getWheres(null, false)

                                + handler.getOrders(null, false));

                pageBean.setListSQL("from Student "

                                + handler.getWheres(null, false)

                                + handler.getOrders(null, false));

                pageBean.setCount(paginate.getTotalCount(pageBean).intValue());


                List<student> list = paginate.getList(pageBean);

                rows = new ArrayList<studentbean>();

                for (Student student : list) {

                        StudentBean bean = new StudentBean();

                        bean.setAge(student.getAge());

                        bean.set__department_id(student.getDepartment().getId());

                        bean.setId(student.getId());

                        bean.setName(student.getName());

                        bean.setSex(student.getSex());

                        bean.setDate(student.getDate());

                        rows.add(bean);

                }

                total = pageBean.getPageCount();

                records = pageBean.getCount();

        }


}


</studentbean></student></studentbean>

分享到:
评论

相关推荐

    jqGrid 中文大全(1)

    “jqGrid基础学习:5jqGrid中事件的使用”涵盖了jqGrid的各种事件,如loadComplete、beforeSelectRow等,这些事件可以用来监听用户操作并执行相应的处理函数,增强了交互性和功能定制。 6. **jqGrid的中文支持**:...

    JQGrid 分页

    在这个特定的"JQGrid分页"项目中,我们关注的是如何实现数据的分页功能,这在处理大量数据时尤为重要,因为它能提高网页的加载速度和用户体验。 首先,我们需要理解JQGrid分页的基本概念。在JQGrid中,分页通常分为...

    jqGrid(版本:5.1.0)

    **jqGrid(版本:5.1.0)详解** ...学习jqGrid需要耐心和实践,官方文档和社区资源是宝贵的参考资料。不断探索和理解其内部机制,你会发现jqGrid是一个功能强大且灵活的工具,能够满足复杂的数据展示和操作需求。

    jqgrid加载本地数据并且分页例子

    在这个"jqgrid加载本地数据并且分页例子"中,我们将深入探讨如何利用jqGrid实现从本地数据源加载数据并进行分页显示。 首先,要理解jqGrid的工作原理。它基于jQuery库,通过HTML表格元素来渲染数据,并通过AJAX从...

    jqgrid分页参数

    ### jqGrid 分页参数详解 #### 一、引言 在Web应用开发中,数据展示是必不可少的一个环节。为了提供更好的用户体验以及优化服务器资源利用,前端分页技术...希望本文能帮助大家更好地理解和使用`jqGrid`中的分页功能。

    jqGrid使用demo: 数据加载 增加, 修改, 删除, 还原, 撤销等

    数据加载过程中,还可以配置分页、排序和搜索等功能,如`loadonce`(一次性加载所有数据)、`sortname`(默认排序列)和`search`(开启搜索)等选项。 二、增加数据 在jqGrid中,新增数据通常通过弹出对话框进行。...

    jqGrid 做的表格分页

    ; charset=utf-8"&gt; &lt;title&gt;Insert title here ...&lt;link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css"&gt; &lt;script type="text/javascript" src="js/jquery-1.11.0.min.js" &gt;&lt;/script&gt; ...

    JqGrid分页

    **一、JqGrid分页基础** JqGrid的分页功能是通过设置参数实现的,主要涉及以下几个关键参数: 1. `pager`:定义分页控件的位置,通常是一个HTML元素ID。 2. `rowList`:提供用户可选择的每页显示记录数选项。 3. `...

    JQGrid本地数据分页

    在这个“JQGrid本地数据分页”的示例中,我们将探讨如何使用JQGrid实现对本地数据的分页处理。 JQGrid提供了一种灵活的方式来处理数据,无论是从服务器获取还是直接使用本地数据。本地数据分页意味着数据已经在...

    JqGrid 纯Json自带分页功能

    在这个场景中,我们将关注JqGrid如何利用纯JSON数据实现自动分页。 在Web开发中,分页是处理大量数据时非常重要的一个功能,它可以提升用户体验,避免一次性加载过多数据导致页面响应慢或浏览器崩溃。JqGrid支持...

    JqGrid中文API文档

    JqGrid是一款强大的JavaScript数据网格组件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如分页、排序、过滤、编辑和格式化数据。本中文API文档将帮助开发者深入理解并有效利用JqGrid的...

    jqgrid本地数据分页

    在jqGrid中,本地数据分页可以通过设置`datatype`为`local`来实现。这样做可以减少服务器负载,因为只需要传输当前页面所需的数据。 **jqGrid本地数据分页实现步骤** 1. **引入jqGrid库和样式** 首先,在HTML文件...

    jqGrid基础学习_华水

    在"jqGrid基础学习_华水"系列中,我们可以期待学习到关于jqGrid的以下核心知识点: 1. **安装与引入**:了解如何下载和引入jqGrid及相关依赖,如jQuery和jQuery UI,以及如何在HTML页面中设置必要的脚本和样式链接...

    基于jqgrid实现树形菜单分页列表查询

    在请求返回后,使用`addRowData`或`setTreeGrid`方法将数据添加到表格中。同时,可以利用`beforeSelectRow`和`onSelectRow`事件监听用户的选择行为,实现对选中行的处理。 配合Bootstrap,可以提升界面的美观度和...

    jqGrid中文文档.doc

    jqGrid 提供丰富的功能,如数据分页、排序、过滤、编辑、导入导出等。在实际应用中,你可以根据项目需求选择合适的组件和配置,以实现高效的数据管理界面。通过深入理解 jqGrid 的 API 和各种选项,可以定制化地满足...

    jqgrid加载本地数据分页Demo

    通过学习这个Demo,开发者可以更好地理解如何在实际项目中应用jqGrid,实现本地数据的动态分页显示。 总结来说,jqGrid是一款强大的表格插件,特别适合处理大量的数据展示和操作。通过本地数据分页的配置,我们可以...

    Spring MVC 分页组件和JqGrid导出

    在本文中,我们将深入探讨Spring MVC分页组件和JqGrid如何协同工作,实现高效的数据展示和导出功能。Spring MVC作为Java企业级应用的主流框架,提供了强大的MVC架构支持,而JqGrid则是一个功能丰富的jQuery插件,专...

    jqgrid分页代码

    通过这段代码,我们可以了解到如何在 Java 应用程序中使用 JDBC 连接 MySQL 数据库,并通过构造 SQL 语句实现基于服务器的分页功能。此外,还了解到了如何处理 HTTP 请求及响应的过程。这对于理解基于 JqGrid 的分页...

    Jqgrid中文使用手册

    ### JqGrid中文使用手册知识点概述 #### 一、JqGrid安装与配置 JqGrid是一款基于jQuery的网格插件,它提供了丰富的功能用于展示和管理数据表格。本章节详细介绍了如何安装JqGrid,并给出了一个简单的示例。 **...

    jqGrid 的使用笔记:1. 开始

    这篇笔记将引导我们逐步了解如何在项目中开始使用 jqGrid。jqGrid 提供了丰富的特性,包括数据分页、排序、过滤、编辑、导出等功能,使其成为 Web 应用程序中展示和操作大量数据的理想选择。 ### 1. 安装 jqGrid ...

Global site tag (gtag.js) - Google Analytics