easyui datagrid实现前台和后台的动态分页_西北野散人

http://blog.sina.com.cn/u/2847824455

首页博文目录关于我

个人资料

微博

加好友发纸条

写留言加关注

博客等级：
博客积分：

博客访问：
关注人气：
获赠金笔：0支
赠出金笔：0支
荣誉徽章：

正文字体大小：大中小

easyui datagrid实现前台和后台的动态分页

(2014-01-05 19:14:42)

easyui提供的datagrid实现了对应的前台一次分页，对于后台分页还是比较简单的，毕竟每次点击分页按钮的时候提供了对应的两个参数，然后根据对应action获取对应的数据进行对应的显示，他的两个参数 pageNumber,pageSize是存在浏览器参数中的，可以通过response进行获取，
HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("application/json");

前台分页，前台分页只要是改了easyui自己的pagefiter方法，通过pager.pagination({
                    onSelectPage:function(pageNum, pageSize){
                        opts.pageNumber = pageNum;
                        opts.pageSize = pageSize;
                        pager.pagination('refresh',{
                            pageNumber:pageNum,
                            pageSize:pageSize
                        });
                        dg.datagrid('loadData',getDataFenYe(pageNum,pageSize));

                    }
                });
中的pageNum, pageSize设置当前需要显示的数据






//     var strList = {};

//     function getDataFenYe(pageNumber,pageSize){
//         var start = pageNumber * pageSize;
//         var end = pageNumber * pageSize+ pageSize;
//         var tt = {};
//         var rows = [];
//         for(var i=start; i<=end; i++){
//             var amount = Math.floor(Math.random()*1000);
//             var price = Math.floor(Math.random()*1000);
//             rows.push({
//                 inv: 'Inv No '+i,
//                 date: $.fn.datebox.defaults.formatter(new Date()),
//                 name: 'Name '+i,
//                 amount: amount,
//                 price: price,
//                 cost: amount*price,
//                 note: 'Note '+i
//             });
//         }
//         tt = {total:800,rows:rows};
//         return tt;
//     }
//     function pagerFilter(data){
//                  data = strList;
//                 var dg = $(this);
//                 var opts = dg.datagrid('options');
//                 var pager = dg.datagrid('getPager');
//                 pager.pagination({
//                     onSelectPage:function(pageNum, pageSize){
//                         opts.pageNumber = pageNum;
//                         opts.pageSize = pageSize;
//                         pager.pagination('refresh',{
//                             pageNumber:pageNum,
//                             pageSize:pageSize
//                         });
//                         dg.datagrid('loadData',getDataFenYe(pageNum,pageSize));

//                     }
//                 });
//                 data = getDataFenYe(opts.pageNumber ,opts.pageSize);
//                     data.originalRows = (data.rows);
//                 return data;
//             }
//     function getData(){
//         var rows = [];
//         var tt = [];
//         for(var i=1; i<=800; i++){
//             var amount = Math.floor(Math.random()*1000);
//             var price = Math.floor(Math.random()*1000);
//             if(i > 10 && i < 20 )
//             tt.push({
//                 inv: 'Inv No '+i,
//                 date: $.fn.datebox.defaults.formatter(new Date()),
//                 name: 'Name '+i,
//                 amount: amount,
//                 price: price,
//                 cost: amount*price,
//                 note: 'Note '+i
//             });
//             if( i < 10){
//                 rows.push({
//                     inv: 'Inv No '+i,
//                     date: $.fn.datebox.defaults.formatter(new Date()),
//                     name: 'Name '+i,
//                     amount: amount,
//                     price: price,
//                     cost: amount*price,
//                     note: 'Note '+i
//                 });
//             }

//         }
//         strList = {
//                 total: 800,
//                 rows: tt
//         };
//         return rows;
//     }
//     $(function(){
//         $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
//     });

利用后台分页主要代码如下：

-->

后台java代码：public void list() throws Exception{
        HttpServletRequest request = ServletActionContext.getRequest();
        int page = Integer.parseInt(request.getParameter("page"));
        int limit = Integer.parseInt(request.getParameter("rows"));

        Map maps = new HashMap();
        maps.put("total", mapserviceConfig.count());
        maps.put("rows", mapserviceConfig.pageList((page - 1) * limit, limit));

        try {
            HttpServletResponse response = ServletActionContext.getResponse();
            response.setContentType("application/json");
            response.setCharacterEncoding("utf-8");
            PrintWriter writer = response.getWriter();
            writer.write(JsonMapper.getMapper().writeValueAsString(maps));
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report

前一篇：[转载]Arcgis for FLex 开发

后一篇：flex保存截图，并且输出成png图片

新浪BLOG意见反馈留言板　欢迎批评指正