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

本文详细介绍了jqGrid分页功能的使用方法,包括如何在页面上设置分页层,如何配置分页参数,以及如何通过事件和接口实现数据分页。文章还提供了分页实例和分页Bean的实现,帮助开发者更深入地理解并应用jqGrid的分页功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

转至:http://blog.youkuaiyun.com/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}"

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

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

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

 

<script>

...

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

...

</script>

 

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

事件名参数说明
onPagingpgButton当点击翻页按钮但还为展现数据时触发此事件,当然这跳转栏输入页码改变页时也同样触发此事件。参数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>

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <link type="text/css" rel="stylesheet" href="css/jquery-ui-1.9.2.custom.min.css"> <link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css"> <link rel="stylesheet" type="text/css" media="screen" href="css/ui.multiselect.css"> <script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script> <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script> <script type="text/javascript" src="js/jquery.layout-1.2.0.js"></script> <script type="text/javascript" src="js/i18n/grid.locale-cn.js"></script> <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script> <script type="text/javascript" src="js/jquery.tablednd.js"></script> <script type="text/javascript" src="js/jquery.contextmenu.js"></script> <script type="text/javascript" src="js/ui.multiselect.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#list").jqGrid({ url:"happyEvent/jsonlist", datatype: "json", height: "auto", width:"auto", colNames:['id','时间', '用户名', '标题','内容'], colModel:[ {name:'id',index:'id', width:60, sorttype:"int"}, {name:'time',index:'time', width:90, sorttype:"date"}, {name:'name',index:'name', width:100}, {name:'title',index:'title', width:300, align:"left",sorttype:"float"}, {name:'content',index:'content', width:80, align:"left",sorttype:"float"} ], rowNum:2, rowList:[2,4,6], sortname: 'id', pager:"#pager", multiselect: true, caption: "喜事列表" }); $("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false}); }); </script> </head> <body> <table id="list"></table> <div id="pager"></div> </body>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值