easyui分页

最新推荐文章于 2023-07-11 17:51:55 发布
最新推荐文章于 2023-07-11 17:51:55 发布
阅读量867 收藏 1
点赞数
分类专栏： java

第一点

datagrid会向后台传递 


rows（每一页展示多少条数据），

page（第几页）


这两个数据，而在文档中没有指出来 ，这也是我今天弄了很久的原因（看别人写的代码发现的这一点）


第二点

后台传json数据时也要按照datagrid的数据格式，另外分页有两个数据，文档也没有指出来

 total键 存放总记录数
rows键 存放每页记录


有了这两点，分页就比较容易实现 了

一般按其默认的方法就行


下面贴代码，这里只贴关键的

后台

[java] view plain copy
  1. private int rows;//每页多少条数据  
  2. private int page;//第几页  
  3. public void setRows(int row){  
  4.     System.out.println(row);  
  5.     this.rows = row ;  
  6. }  
  7. public void setPage(int page){  
  8.     System.out.println(page);  
  9.     this.page = page ;  
  10. }  
  11. //传给datagrid的数据  
  12. public Map<String,Object> getMapData(){  
  13.     return this.mapData ;  
  14. }  
  15.   
  16. public String getDataGrid(){  
  17.     System.out.println("here");  
  18.     mapData = new HashMap<String,Object>();  
  19.       
  20.     List<Map<String,Object>> listDataGrid;//存放每一页的数据  
  21.     Map<String,Object> dgMap;  
  22.     List<GpsData> listDG;  
  23.     listDG = gpsDataService.getGpsDataList();  
  24.     listDataGrid = new ArrayList<Map<String,Object>>();  
  25.       
  26.     int len = listDG.size() ;//防止越界  
  27.     for(int i=(page-1)*rows ; i<  page*rows && i< len ; i++){//采用分页机制查询  
  28.         dgMap = new HashMap<String,Object>();  
  29.         dgMap.put("terminalId", listDG.get(i).getTerminalId());  
  30.         dgMap.put("msgTime", listDG.get(i).getMsgTime());  
  31.         dgMap.put("lon", listDG.get(i).getDegreeLon());  
  32.         dgMap.put("lat", listDG.get(i).getDegreeLat());  
  33.         dgMap.put("speed", listDG.get(i).getSpeed());  
  34.         listDataGrid.add(dgMap);  
  35.     }  
  36.       
  37.     mapData.put("total", len);//total键 存放总记录数，必须的  
  38.     mapData.put("rows", listDataGrid);//rows键 存放每页记录 list  
  39.       
  40.     return "datagrid" ;  
  41. }  



前台

[javascript] view plain copy
  1. $(function(){  
  2.     $('#dg').datagrid({  
  3.         url:'getDataGrid',  
  4.         singleSelect:true,  
  5.         ctrlSelect:true,  
  6.         method:'post',  
  7.         loadMsg:'loading......',  
  8.         collapsible:true,//可折叠  
  9.         pagination:true,      
  10.         rownumbers:true,  
  11.         pageSize:15,  
  12.         pageList:[5,15,30]  
  13.         });  
  14.     $('#dg').datagrid('getPager').pagination({  
  15.   
  16.         displayMsg:'当前显示第 {from}-{to} 条记录 ， 共 {total} 条记录'  
  17.   
  18.     });  
  19.     });  

[javascript] view plain copy
  1.  <body>  
  2.  <div class="easyui-layout" style="width:100%;height:100%">  
  3.     <div data-options="region:'west',title:'时间',split:'true'" style="width:300px">时间  
  4.     </div>  
  5.     <div data-options="region:'center',title:'后台数据信息展示'" >  
  6.       
  7.      <div id="tdg" class="easyui-layout" style="width:100%;height:100%">  
  8.       <div data-options="region:'center'" >  
  9.     <table id="dg" class="easyui-datagrid" title="data grid" style="height:500px">  
  10.         <thead>  
  11.             <tr>  
  12.                 <th data-options="field:'terminalId',width:80,align:'center'">设备号</th>  
  13.                 <th data-options="field:'msgTime',width:120,align:'center'">GPS时间</th>  
  14.                 <th data-options="field:'lon',width:150,align:'center'">经度</th>  
  15.                 <th data-options="field:'lat',width:150,align:'center'">纬度</th>  
  16.                 <th data-options="field:'speed',width:80,align:'center'">车速</th>  
  17.             </tr>  
  18.         </thead>  
  19.     </table>  
  20.   </div>  
  21.  </div>  
  22.    
  23. </div>  
  24.  </div>  
  25.  </body>  
超爽柠檬味
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EasyUI中分页的简单使用
忆水思寒的博客
09-18 1388
场景 效果 属性 名称类型描述默认值totalnumber记录总数，应该在创建分页（pagination）时设置。1pageSizenumber页面尺寸。（注：每页显示的最大记录数）10pageNumbernumber创建分页（pagination）时显示的页码。1pageListarray用户能改变页面尺寸。pageList 属性定义了能改成多大的尺寸。 代码实例：   ...
easyui实现分页
w_t_y_y的博客
11-20 1107
.
easyui-分页功能详解
Developer of XingKong22star
11-21 3169
我们现在后台是SSI，前台用的是jquery easyUi easyui的Datagrid分页原理： 通过pagination:true,属性来指定easyui的分页功能，当前端页面会通过ajax发送分页显示请求时，会向后台传递两个参数，page和rows,在struts2的action中通过属性驱动可
easyui分页方法
08-08
easyui分页方法
easyui 分页插件
12-29
easyui分页插件，分页插件传递查询参数，和返回之后执行的方法
easyui分页实现
07-04
通过easyui 中的控件实现分页 效果
EasyUI中使用分页
qq_35317752的博客
07-01 1144
???? 前端设置使用分页功能 在datagrid中使用分页功能，有如下常用属性： pagination:bool // 开启分页 pageList:[5,10,20,30,40,50]//供选择的每页有多少记录 pageSize:20 //每页显示的记录数，默认20 ???? 后端返回对应的数据 从后台返回的数据封装成如下格式 return new { total:300, //一共有多少记录 rows:list // 当前分页的数据 } ????例子 前端绑定 function EGridI
用easyui实现分页操作
07-18
demo-easyui.rar此文件是将数据库中的表的数据提取到页面上,并用easyui将其实现分页。里面的table.jsp使用前端进行分页table2.jsp使用后台进行分页,当你转好tomcat后,运行tomcat服务器。可以通过http://localhost:12603/demo-easyui/body.jsp#来访问
easyui datagrid 分页查询样例
08-24
采用easyui datagrid实现后台Springmvc分页查询的maven工程,下载吧， 你不得后悔，jquery-easyui-1.5.2
EasyUI DataGrid及Pagination(源码)
11-06
介绍EasyUI的DataGrid数据表格以及Pagination分页 按照说明可直接运行代码. .
easyUI 海量分页
09-03
这是一个demo 想学easyui 和手写分页存储过程的绝对的好机会！
EasyUI Pagination 分页的两种做法小结
最新发布
Andyfu2019的博客
07-11 1065
EasyUI 的 datagrid 支持服务器端分页，但是官方的资料比较少，以下总结了两种 datagrid 的服务器端分页机制，一种是datagrid默认机制，另一种是利用 Ajax 获取数据并填充 Datagrid，可根据情况具体使用。在上面的代码中，我们可以假设是点了界面的某个按钮，调用了 step1Ok 这个方法后，才会去 url 查询数据，并呈现到 UI 中去。如果企图通过其它的 JS 方法来调用 ('#dgd').datagrid 方法，则不会得到正确的分页结果。
如何用easyui在页面上实现分页操作
qq_35654259的博客
07-18 3554
此项目我发布在https://download.csdn.net/download/qq_35654259/10549651中 1、效果图(下图为分页效果图) 分页效果图 2、准备工作      1)在操作数据库的java文件中要存在分页查询和 数据的总行数         1-1数据的分页查询     (下面oracle语句中TABLE_NAME为表名, ROWNUM 是一个序列,...
JQUERY EASYUI 分页(PAGINATION)用法
热门推荐
疯狂程序员
06-14 3万+
在web开发中，经常会遇到分页的需求，如果靠我们手写代码，可能代码又多 ，样式又不好看，下面介绍一下jQuery easyUI 分页功能，非常的方便简单，下面看一下效果图： HTML代码 然后按照《jQuery EasyUI框架使用文档》包含必要文件后，只要在$(function(){ }); 里插入下面的代码即可： $(#pp).pagination(options); 下面来介绍Pag
C#的WebApi 与 EasyUi的DataGrid结合生成的可分页界面
akuoma的专栏
04-24 2291
1、从数据库每次取出的数据为当前分页的数据。 2、分页用的是EasyUI 的 Pagination控件，与DataGrid是相对独立的。 3、后台数据获取是通过WebApi去获取。 4、传入参数是：pageSize、pageNumber 及其它条件。传参用的是Post方法（Get同样可以). 效果如图： 其它的不说，直接上代码： HTML代码：
EasyUI Pagination 分页的两种做法
路漫漫 修远兮
02-27 1万+
因为是转载文章 在此标明出处，以前有文章是转的没标明的请谅解，因为有些已经无法找到出处，或者与其它原因。 如有冒犯请联系本人，或删除，或标明出处。 因为好的文章，以前只想收藏，但连接有时候会失效，所以现在碰到好的直接转到自己这里。 原文 出处http://www.cnblogs.com/luminji/p/3294439.html
我的easyui分页设置了多语言,但是在刚开始加载时,分页还是会显示默认的英文,如何处理
05-28
如果您使用的是easyui来设置多语言分页，可以通过以下方式来避免默认的英文出现： 1. 在页面加载之前，先将easyui的语言设置为您所...这样，在页面加载时，easyui分页就会显示您所设置的语言，而不是默认的英文了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值