第一点
datagrid会向后台传递
rows(每一页展示多少条数据),
page(第几页)
这两个数据,而在文档中没有指出来 ,这也是我今天弄了很久的原因(看别人写的代码发现的这一点)
第二点
后台传json数据时也要按照datagrid的数据格式,另外分页有两个数据,文档也没有指出来
total键 存放总记录数
rows键 存放每页记录
有了这两点,分页就比较容易实现 了
一般按其默认的方法就行
下面贴代码,这里只贴关键的
后台
- private int rows;//每页多少条数据
- private int page;//第几页
- public void setRows(int row){
- System.out.println(row);
- this.rows = row ;
- }
- public void setPage(int page){
- System.out.println(page);
- this.page = page ;
- }
- //传给datagrid的数据
- public Map<String,Object> getMapData(){
- return this.mapData ;
- }
- public String getDataGrid(){
- System.out.println("here");
- mapData = new HashMap<String,Object>();
- List<Map<String,Object>> listDataGrid;//存放每一页的数据
- Map<String,Object> dgMap;
- List<GpsData> listDG;
- listDG = gpsDataService.getGpsDataList();
- listDataGrid = new ArrayList<Map<String,Object>>();
- int len = listDG.size() ;//防止越界
- for(int i=(page-1)*rows ; i< page*rows && i< len ; i++){//采用分页机制查询
- dgMap = new HashMap<String,Object>();
- dgMap.put("terminalId", listDG.get(i).getTerminalId());
- dgMap.put("msgTime", listDG.get(i).getMsgTime());
- dgMap.put("lon", listDG.get(i).getDegreeLon());
- dgMap.put("lat", listDG.get(i).getDegreeLat());
- dgMap.put("speed", listDG.get(i).getSpeed());
- listDataGrid.add(dgMap);
- }
- mapData.put("total", len);//total键 存放总记录数,必须的
- mapData.put("rows", listDataGrid);//rows键 存放每页记录 list
- return "datagrid" ;
- }
前台
- $(function(){
- $('#dg').datagrid({
- url:'getDataGrid',
- singleSelect:true,
- ctrlSelect:true,
- method:'post',
- loadMsg:'loading......',
- collapsible:true,//可折叠
- pagination:true,
- rownumbers:true,
- pageSize:15,
- pageList:[5,15,30]
- });
- $('#dg').datagrid('getPager').pagination({
- displayMsg:'当前显示第 {from}-{to} 条记录 , 共 {total} 条记录'
- });
- });
- <body>
- <div class="easyui-layout" style="width:100%;height:100%">
- <div data-options="region:'west',title:'时间',split:'true'" style="width:300px">时间
- </div>
- <div data-options="region:'center',title:'后台数据信息展示'" >
- <div id="tdg" class="easyui-layout" style="width:100%;height:100%">
- <div data-options="region:'center'" >
- <table id="dg" class="easyui-datagrid" title="data grid" style="height:500px">
- <thead>
- <tr>
- <th data-options="field:'terminalId',width:80,align:'center'">设备号</th>
- <th data-options="field:'msgTime',width:120,align:'center'">GPS时间</th>
- <th data-options="field:'lon',width:150,align:'center'">经度</th>
- <th data-options="field:'lat',width:150,align:'center'">纬度</th>
- <th data-options="field:'speed',width:80,align:'center'">车速</th>
- </tr>
- </thead>
- </table>
- </div>
- </div>
- </div>
- </div>
- </body>