SpringMVC+EASYUI实现分页

最新推荐文章于 2018-04-19 12:15:11 发布

神奇的种子

最新推荐文章于 2018-04-19 12:15:11 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/qq_29272491/article/details/73200007

版权

本文介绍了如何结合SpringMVC框架和EASYUI库实现前端分页显示的功能，详细讲解了Controller层的处理逻辑和与前端交互的过程。

摘要由CSDN通过智能技术生成

Controller

	 @RequestMapping("userList")
	 @ResponseBody
	 public Map<String, Object> getAll(HttpServletRequest request){
	 int currentPage=Integer.parseInt(request.getParameter("page"));
	 int pageSize=Integer.parseInt(request.getParameter("rows"));
		 
	int total =	 userService.getAllRecord();
	List<User>  list =userService.getAllUser(currentPage,pageSize);
	 Map<String, Object> map=new HashMap<String,Object>();
	 map.put("total", total);
	 map.put("rows", list);	 
	 return map;
		 
	 }
	 @RequestMapping("goMymain")
	 public String  go(){
		 
		 return "main";
	 }







Service


	@Override
	public List<User> getAllUser(int currentPage, int pageSize) {
		Map<Object,Object> map = new HashMap<>();
		map.put("currentPage",(currentPage-1)*pageSize );
		map.put("pageSize", pageSize);
		return userMapper.getAllUser(map);
	}







Mapper


		<select id="getAllRecord" resultType="int">
		
		select count(*) from user 
		</select>
		
		<select id="getAllUser" resultType="com.wlc.pojo.User" parameterType="map">
		
		 select * from user limit #{currentPage},#{pageSize}
		 
		</select>
页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户信息列表</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

</head>
<body>
    <h2>用户信息列表</h2>
    <p>You can add User,or Edit_User、Delete_User if you selected an user</p>
    <table id="dg" title="用户操作" class="easyui-datagrid" style="width:700px;height:250px"
           	url="<%=request.getContextPath()%>/userList"
            toolbar="#toolbar" pagination="true"
            rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
            <tr>
                <th field="id" width="30" >用户ID</th>
                <th field="name" width="50">姓名</th>
                <th field="password" width="30">密码</th>
              
            </tr>
        </thead>
    </table> 
    <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
            closed="true" buttons="#dlg-buttons">
        <div class="ftitle">用户信息</div>
        <form id="fm" method="post" novalidate>
            <div class="fitem">
                <label>用户ID:</label>
                <input name="id" class="easyui-textbox" required="true" >
            </div>
            <div class="fitem">
                <label>姓名:</label>
                <input name="name" class="easyui-textbox" required="true">
            </div>
             <div class="fitem">
                <label>密码:</label>
                <input name="password" type="password" class="easyui-textbox" required="true">
            </div>
        </form>
    </div>
</body>
</html>==========================================================================================================================================================

页面二使用datagrid
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户信息列表</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript">  
    $(function() {  
        $('#mydatagrid').datagrid({  
            title : 'datagrid实例',  
            iconCls : 'icon-ok',  
            width : 600,  
            pageSize : 5,//默认选择的分页是每页5行数据  
            pageList : [ 5, 10, 15, 20 ],//可以选择的分页集合  
            nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取  
            striped : true,//设置为true将交替显示行背景。  
            collapsible : true,//显示可折叠按钮  
            toolbar:"#tb",//在添加 增添、删除、修改操作的按钮要用到这个  
            url:'userList',//url调用Action方法  
            loadMsg : '数据装载中......',  
            singleSelect:true,//为true时只能选择单行  
            fitColumns:true,//允许表格自动缩放，以适应父容器  
            //sortName : 'xh',//当数据表格初始化时以哪一列来排序  
            //sortOrder : 'desc',//定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。  
            remoteSort : false,  
             frozenColumns : [ [ {  
                field : 'ck',  
                checkbox : true  
            } ] ],   
            pagination : true,//分页  
            rownumbers : true//行数  
        });   
          
    });  
      
</script>   
</head>
<body>
    <h2>  
        <b>easyui的DataGrid实例</b>  
    </h2>  
  
    <table id="mydatagrid">  
       <thead>  
            <tr>  
                <th data-options="field:'id',width:100,align:'center'">学号</th>  
                <th data-options="field:'name',width:100,align:'center'">姓名</th>  
                <th data-options="field:'password',width:100,align:'center'">密码</th>  
              
            </tr>  
        </thead>  
    </table>  
</body>
</html>