SpringMVC+EASYUI实现分页

来源：互联网发布：杨中科c语言也能干大事编辑：程序博客网时间：2024/06/06 01:05
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
@Overridepublic 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>
阅读全文
0 0