如有不明白的地方，戏迎加入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群交流：66728073springmvc + jquery easyui实现分页显示
原文：http://blog.csdn.net/youxijishu/article/details/40058695