码迷,mamicode.com
首页 > 编程语言 > 详细

springmvc + jquery easyui实现分页显示

时间:2014-10-14 02:35:47      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:jsp   easyui   jquery   

如有不明白的地方,戏迎加入QQ群交流:66728073

一,下载并导入jquery easyui的导

<link rel="stylesheet" type="text/css"
	href="<%=basePath%>js/jquery-easyui-1.4/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>js/jquery-easyui-1.4/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>js/jquery-easyui-1.4/themes/color.css">
<script type="text/javascript"
	src="<%=basePath%>js/jquery-easyui-1.4/jquery.min.js"></script>
<script type="text/javascript"
	src="<%=basePath%>js/jquery-easyui-1.4/locale/easyui-lang-zh-CN.js"></script>
<script type="text/javascript"
	src="<%=basePath%>js/jquery-easyui-1.4/jquery.easyui.min.js"></script>
二,jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>文章管理</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>js/jquery-easyui-1.4/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>js/jquery-easyui-1.4/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>js/jquery-easyui-1.4/themes/color.css">
<script type="text/javascript"
	src="<%=basePath%>js/jquery-easyui-1.4/jquery.min.js"></script>
<script type="text/javascript"
	src="<%=basePath%>js/jquery-easyui-1.4/locale/easyui-lang-zh-CN.js"></script>
<script type="text/javascript"
	src="<%=basePath%>js/jquery-easyui-1.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/common.js"></script>
</head>

<body>
	<table id="dg" class="easyui-datagrid" title="所有文章"
		style="width:100%;height:250px"
		data-options="rownumbers:true,singleSelect:true,pagination:true,collapsible:true,url:'blog/getAllBlogs/1',method:'get'">
		<thead>
			<tr>
				<th data-options="field:'id'">文章ID</th>
				<th data-options="field:'title'">文章标题</th>
				<th
					data-options="field:'createTime',align:'center',formatter:formatDate">写作时间</th>
				<th data-options="field:'name',align:'center'">作者</th>
			</tr>
		</thead>
	</table>
	<script type="text/javascript">
        $(function(){
            var pager = $('#dg').datagrid().datagrid('getPager');    // get the pager of datagrid
            pager.pagination({
                buttons:[{
                    iconCls:'icon-search',
                    handler:function(){
                        alert('search');
                    }
                },{
                    iconCls:'icon-add',
                    handler:function(){
                        alert('add');
                    }
                },{
                    iconCls:'icon-edit',
                    handler:function(){
                        alert('edit');
                    }
                }],
                onSelectPage:function(pageNumber, pageSize){
     			 alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
            }); 
            
                       
        })
         function changeP(){
            var dg = $('#dg');
            dg.datagrid('loadData',[]);
            dg.datagrid({pagePosition:$('#p-pos').val()});
            dg.datagrid('getPager').pagination({
                layout:['list','sep','first','prev','sep',$('#p-style').val(),'sep','next','last','sep','refresh']
            });
        }
<span style="white-space:pre">	//jquery-ui中,用于格式化date日期
    function formatDate(val, row) {
<span style="white-space:pre">		</span>var datetime = new Date();
<span style="white-space:pre">		</span>datetime.setTime(val);
<span style="white-space:pre">		</span>var year = datetime.getFullYear();
<span style="white-space:pre">		</span>var month = datetime.getMonth() + 1 < 10 ? "0"
<span style="white-space:pre">				</span>+ (datetime.getMonth() + 1) : datetime.getMonth() + 1;
<span style="white-space:pre">		</span>var date = datetime.getDate() < 10 ? "0" + datetime.getDate()
<span style="white-space:pre">				</span>: datetime.getDate();
<span style="white-space:pre">		</span>var hour = datetime.getHours() < 10 ? "0" + datetime.getHours()
<span style="white-space:pre">				</span>: datetime.getHours();
<span style="white-space:pre">		</span>var minute = datetime.getMinutes() < 10 ? "0"
<span style="white-space:pre">				</span>+ datetime.getMinutes() : datetime.getMinutes();
<span style="white-space:pre">		</span>var second = datetime.getSeconds() < 10 ? "0"
<span style="white-space:pre">				</span>+ datetime.getSeconds() : datetime.getSeconds();
<span style="white-space:pre">		</span>return year + "-" + month + "-" + date + " " + hour + ":" + minute
<span style="white-space:pre">				</span>+ ":" + second;
<span style="white-space:pre">	</span>}</span>
    </script>
</body>
</html>
三,springmvc后台处理

/**
	 * 获取文章
	 * @author guangshuai.wang
	 * 2014-10-14上午12:10:40
	 * @param type
	 * @param request
	 * @param nowpage 			当前页,这个是jquery-easyui自动提交的能参数,参数名必须为page
	 * @param rows				每页显示的记录数,这个是jquery-easyui自动提交的参数,参数名必须为rows
	 * @return
	 */
	@RequestMapping("/getAllBlogs/{type}")
	@ResponseBody
	public String getAllBlogs(@PathVariable("type")int type,HttpServletRequest request,@RequestParam("page") int nowpage,@RequestParam("rows") int rows){
		List<Blog> blogList = blogManager.getAllBlogByType(type);
		request.setAttribute("blogList", blogList);
		int totalBlogs = blogManager.getAllBlogCountByType(type);
		Pages pages = new Pages(totalBlogs, nowpage, rows);
		pages.setUrl("blog/getAllBlogs/" + type + "/");
		request.setAttribute("pageInfo", pages);
		//return "/jsp/blog/allBlog";
		ResponseResult result = new ResponseResult();
		result.setTotal(100);
		result.setRows(blogList);
		return JSON.toJSONString(result);
	}
四,我自己封闭了一个返回类,用于返回jquery easyui封装的json串

        

package com.gametech.entity;

public class ResponseResult {
<span style="white-space:pre">	</span>//这两个成员的命不能变
	private int total;
	private Object rows;
	public int getTotal() {
		return total;
	}
	public void setTotal(int total) {
		this.total = total;
	}
	public Object getRows() {
		return rows;
	}
	public void setRows(Object rows) {
		this.rows = rows;
	}
	
	
}
如有不明白的地方,戏迎加入QQ群交流:66728073

springmvc + jquery easyui实现分页显示

标签:jsp   easyui   jquery   

原文地址:http://blog.csdn.net/youxijishu/article/details/40058695

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!