1. 下面直接贴代码（前端）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <%@page language="java" contentType="text/html;charset=GBK" %> 3 <html lang="en"> 4 <head> 5 <meta charset="GBK"> 6 <title>DataGrid Complex Toolbar - jQuery EasyUI Demo</title> 7 <link rel="stylesheet" type="text/css" href="/xm/js/jquery-easyui-1.4.1/themes/default/easyui.css"> 8 <link rel="stylesheet" type="text/css" href="/xm/js/jquery-easyui-1.4.1/themes/icon.css"> 9 <link rel="stylesheet" type="text/css" href="/xm/js/jquery-easyui-1.4.1/demo/demo.css"> 10 <script type="text/javascript" src="/xm/js/jquery-easyui-1.4.1/jquery.min.js"></script> 11 <script type="text/javascript" src="/xm/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script> 12 </head> 13 <body> 14 <div style="margin:10px 0;"></div> 15 <table class="easyui-datagrid" title="基本数据表格" style="800px;height:450px" 16 data-options="singleSelect:true,collapsible:true,pagination:true,url:'/xm/easyUI/allData.action',toolbar:'#tb'"> 17 <thead> 18 <tr> 19 <th data-options="field:'ITEMID',80">编号</th> 20 <th data-options="field:'PRODUCTID',100">产品编号</th> 21 <th data-options="field:'LISTPRICE',80,align:'right'">市场价</th> 22 <th data-options="field:'UNITCOST',80,align:'right'">成本价</th> 23 <th data-options="field:'ATTR1',250">描述</th> 24 <th data-options="field:'STATUS',60,align:'center'">状态</th> 25 </tr> 26 </thead> 27 </table> 28 <div id="tb" style="padding:5px;height:auto"> 29 <div style="margin-bottom:5px"> 30 <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a> 31 <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a> 32 <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a> 33 <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a> 34 <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a> 35 </div> 36 <div> 37 日期从: <input class="easyui-datebox" style="90px"> 38 到: <input class="easyui-datebox" style="90px"> 39 语言: 40 <select class="easyui-combobox" panelHeight="auto" style="100px"> 41 <option value="java">Java</option> 42 <option value="c">C</option> 43 <option value="basic">Basic</option> 44 <option value="perl">Perl</option> 45 <option value="python">Python</option> 46 </select> 47 <a href="#" class="easyui-linkbutton" iconCls="icon-search">搜索</a> 48 </div> 49 </div> 50 </body> 51 </html>
2. 下面直接贴代码（后台）
1 package com.tiedate.csmiswh.business.easyui; 2 3 import net.sf.json.JSONArray; 4 import org.springframework.beans.factory.annotation.Autowired; 5 import org.springframework.jdbc.core.JdbcTemplate; 6 import org.springframework.stereotype.Controller; 7 import org.springframework.web.bind.annotation.RequestMapping; 8 import org.springframework.web.bind.annotation.RequestParam; 9 import org.springframework.web.bind.annotation.ResponseBody; 10 11 import java.util.HashMap; 12 import java.util.List; 13 import java.util.Map; 14 15 /** 16 * Created by wth on 2015/12/31. 17 * <p/> 18 * tab 19 */ 20 @Controller 21 @RequestMapping(value = "easyUI") 22 public class TabController { 23 24 @Autowired 25 private JdbcTemplate jdbcTemplate; 26 27 28 @RequestMapping(value = "allData") 29 @ResponseBody 30 public Object getAllData(@RequestParam Integer page, @RequestParam Integer rows) {//page第几页；rows一页多少行 31 String countSql = "select count(*) from product t"; 32 int total = jdbcTemplate.queryForInt(countSql);//sum total 33 String sqlStr = "SELECT PRODUCTID," + 34 "PRODUCTNAME," + 35 "UNITCOST," + 36 "STATUS," + 37 "LISTPRICE," + 38 "ATTR1," + 39 "ITEMID FROM product T "; 40 if (total > 0) { 41 sqlStr = setPageSql(sqlStr, page, rows); 42 System.out.println(":::page Sql " + sqlStr); 43 List<Map<String, Object>> dataList = jdbcTemplate.queryForList(sqlStr);//all data 44 Map map = new HashMap(); 45 map.put("total", total); 46 map.put("rows", dataList); 47 System.out.println(":::tab data" + JSONArray.fromObject(map).toString()); 48 return map; 49 } 50 51 return null; 52 } 53 54 /*** 55 * 拼写分页Sql 56 * 57 * @param sql 58 * @param page 第几页 59 * @param rows 一页多少行 60 * @return String 61 */ 62 private String setPageSql(String sql, Integer page, Integer rows) { 63 StringBuilder sqlStr = new StringBuilder(); 64 Integer smallPage = ((page - 1) * rows) + 1; 65 Integer bigPage = smallPage + rows; 66 sqlStr.append("select * from (select t.*,rownum rn from ("); 67 sqlStr.append(sql); 68 sqlStr.append(") t where rownum<" + bigPage + ") t1 where rn>=" + smallPage + ""); 69 70 return sqlStr.toString(); 71 } 72 73 74 }
3.简单效果与页面分析
实现思路主要根据请求分页参数，easyui在每次点击页码插件时候会往后台传递参数（page，rows），我就可以利用这些参数实现我们的分页功能，其中利用到oracle分页sql拼写。