SSM分页解决方案-easyui

SSM分页解决方案-easyui

一、mybatis分页插件--Mybatis-PageHelper
1.下载
    https://github.com/pagehelper/Mybatis-PageHelper
2.mybatis中最方便的分页插件，支持单表和多表分页查询。
3.要使用PageHelper，只需要在类路径中包含 pagehelper-xxx.jar 和jsqlparser-0.9.5.jar文件。xxx为最新版本号，到主页查询
4.maven项目的pom.xml中设置
    <dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper</artifactId>
        <version>5.0.0</version>
    </dependency>
5.在mybatis的配置文件SqlMapConfig.xml中配置拦截器插件（在配置环境变量前添加）
    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
            <!-- 配置支持方法参数，一般用来设置pageSize和pageNum -->
            <property name="supportMethodsArguments" value="true"/>            
        </plugin>
    </plugins>
6.在spring中配置
    <bean id="sqlSessionFactoryBean" class="org.mybatis.spring.SqlSessionFactoryBean">        
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <value>    
                            supportMethodsArguments=true
                        </value>
                    </property>
                </bean>
            </array>
        </property>
    </bean>
7.代码分页
    1）接口类中添加方法（对参数使用注解）
        List<Dept> pagedData(@Param("pageSize") int pageSize,@Param("pageNum") int pageNum);
    2）mapper类中
        <select id="pagedData" resultMap="BaseResultMap">
            select * from dept order by deptno
        </select>
    3）Service类中：
        public List<Dept> pagedData(int pageSize, int pageNum) {
        
            return deptService.pagedData(pageSize, pageNum);
        }
    4）控制器类中：
        public String getPagedData(@RequestParam(value="pageNum",defaultValue="1") int pageNum,Model model){
            int pageSize = 3;
            Page<Dept> page = (Page<Dept>)deptService.pagedData(pageSize, pageNum);
            
            model.addAttribute("page", page);
            
            return "dept/getpaged";    
        }
    5）jsp中
        <table class="table table-hover">
            <c:forEach items="${ page }" var="dept">
                <tr>
                    <td>${ dept.deptno }</td>
                    <td>${ dept.dname }</td>
                    <td>${ dept.loc }</td>
                </tr>
            </c:forEach>
        </table>
    6）修改控制器类，得到分页信息
        @RequestMapping("/showpage")
        public String getPaged(@RequestParam(defaultValue="1") int pageNum,Model model){
            int pageSize = 3;
    //        List<Emp> list = empService.getPaged(pageSize, pageNum);
    //        model.addAttribute("list", list);
            
            Page<Emp> list = (Page<Emp>)empService.getPaged(pageSize, pageNum);
            model.addAttribute("list", list);
            model.addAttribute("pageNum", list.getPageNum());//得到页号
            model.addAttribute("pages", list.getPages());//得到总页数
            model.addAttribute("total", list.getTotal());//得到总行数
            return "emp/showpage";
        }
    7）修改jsp页，显示分页信息
        <table border="1" align="center" width="500">
            <c:forEach items="${list }" var="emp">
                <tr>
                    <td>${ emp.empno }</td>
                    <td>${ emp.ename }</td>
                    <td>${ emp.job }</td>
                </tr>
            </c:forEach>
            <tr>
                <td colspan="3">
                    页号：${ pageNum } 总页数：${ pages } 总行数：${ total }
                </td>
            </tr>
        </table>
二、easyui中的datagrid分页
1.导入js和css：
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/themes/icon.css">
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/locale/easyui-lang-zh_CN.js"></script>
2.页面中添加表格
    <body>
        <table id="tab3Datagrid">
                                
        </table>
    </body>
3.编写jquery就绪函数：
    $(function(){
    
        $("#tab3Datagrid").datagrid({
            columns:[[
                      {title:"编号",field:"empno",checkbox:true},
                      {title:"姓名",field:"ename"},
                      {title:"工作",field:"job"},
                      {title:"入职日期",field:"hiredate",width:120,
                          //对日期字段进行处理
                          formatter:function(value){
                              var d = new Date(value);
                              return d.Format("yyyy-MM-dd");//調用上面定义的格式化方法
                              
                          }
                         }
                      ]
                      ],
            url:'${pageContext.request.contextPath }/emp/showpage_json.action',
            rownumbers:true,
            singleSelect:true,
            toolbar:[
                     {text:'添加',iconCls:'icon-add',
                         handler:function(){
                             alert('添加');
                         }
                     },
                     {text:'修改',iconCls:'icon-edit'},
                     {text:'删除',iconCls:'icon-remove'}
                     ],
            pagination:true,
            pageList:[5,10,15,20],//设置每页行数列表
            pageSize:5//设置每页行数
        });
});

4.服务器端控制器代码：
    @RequestMapping("/showpage_json")
    @ResponseBody
    public PageResult getPaged_json(int page,int rows){//page为页号，rows为每页行数
        Page<Emp>  pageList = (Page<Emp>)empService.getPaged(rows, page);
        
        PageResult result = new PageResult();
        result.setTotal(pageList.getTotal());
        result.setRows(pageList.getResult());

        return result;
    }
5.修改控制器分页方法实现，这样可以不用在mapper接口中添加分页方法了
    @Service
    public class EmpServiceImpl implements EmpService {
        @Autowired
        private EmpMapper empMapper;

        @Override
        public List<Emp> getPaged(int pageSize, int pageNum) {
            //设置分页信息
            PageHelper.startPage(pageNum, pageSize);
            //执行查询
            EmpExample example = new EmpExample();
            example.setOrderByClause("empno asc");
            List<Emp> list = empMapper.selectByExample(example);        
            
            return list;
        }

    //    @Override
    //    public List<Emp> getPaged(int pageSize, int pageNum) {
    //        
    //        return empMapper.getpaged(pageSize, pageNum);
    //    }

    }
6.easyui中datagrid日期字段格式化
    // 对Date的扩展，将 Date 转化为指定格式的String
    //月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， 
    //年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
    //例子： 
    //(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
    //(new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18 
    Date.prototype.Format = function (fmt) { //author: meizz 
     var o = {
         "M+": this.getMonth() + 1, //月份 
         "d+": this.getDate(), //日 
         "h+": this.getHours(), //小时 
         "m+": this.getMinutes(), //分 
         "s+": this.getSeconds(), //秒 
         "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
         "S": this.getMilliseconds() //毫秒 
     };
     if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
     for (var k in o)
     if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
     return fmt;
    }
    //调用： var time1 = new Date().Format("yyyy-MM-dd");var time2 = new Date().Format("yyyy-MM-dd HH:mm:ss");

7.删除案例（把对象绑定到复选框上）
  1）业务逻辑层接口方法：
    public int dels(List<Integer> empnos);
  2）业务逻辑层实现类代码：
    @Override
    public int dels(List<Integer> empnos) {
        EmpExample example = new EmpExample();
        example.createCriteria().andEmpnoIn(empnos);
        return empMapper.deleteByExample(example);
    }
  3）控制器代码：
    @RequestMapping("/dels")
    @ResponseBody
    public int dels(String empnos){
        String[] empno = empnos.split(",");
        List<Integer> nos = new ArrayList<Integer>();
        for(int i = 0;i < empno.length;i++){
            nos.add(Integer.parseInt(empno[i]));
        }

        return empService.dels(nos);
    }
   4）jsp页面代码：
    {text:'删除',iconCls:'icon-remove',
         handler:function(){
             //得到所有被选中的josn对象
             var checkedObj =  $("#tab3Datagrid").datagrid("getChecked");
             if(checkedObj.length==0){
                 alert("请选择要删除的员工！");
                 return;
             }
             
             if(!confirm("是否删除选中的员工？")){
                 return;
             }
             var empnos = "";
            
             for(var i = 0;i < checkedObj.length;i++){
                 empnos += checkedObj[i].empno+",";
             }
             empnos = empnos.substring(0, empnos.length-1);
             var url = "${pageContext.request.contextPath }/emp/dels";
             $.post(url,"empnos="+empnos,function(data){
                 if(data == checkedObj.length){
                     for(var i = checkedObj.length - 1;i>=0;i--){
                         //根据对象，得到该对象行的索引号
                         var rowIndex = $("#tab3Datagrid").datagrid("getRowIndex",checkedObj[i]);
                         //根据索引号删除行
                         $("#tab3Datagrid").datagrid("deleteRow",rowIndex);
                     }
                 }else{
                     alert("删除错误！");
                 }
             });
         }
     }
 

源代码地址：https://download.csdn.net/download/pcbhyy/10762442

源代码目录结构说明：
1.lib为mybatis分页插件jar文件
2.ssm_page_demo为使用了mybatis分页插件和bootstrap分页控件的案例
    1）默认使用了ajax得到分页数据
    2）如需修改为同步分页数据，需要修改DeptController中getPagedData方法的返回值为"dept/getpaged"
3.bootstrap-paginator-master.zip为bootstrap分页插件的源码
4.SSM分页解决方案为综合案例的使用说明