您的位置：首页 > Web前端 > JQuery

springmvc + jquery easyui实现分页显示

2014-11-13 10:36 591 查看

如有不明确的地方，戏迎增加QQ群交流：66728073 推荐一本Java学习的书:深入理解Java7

一，下载并导入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']
});
}

//jquery-ui中，用于格式化date日期
function formatDate(val, row) {
var datetime = new Date();
datetime.setTime(val);
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1 < 10 ? "0"+ (datetime.getMonth() + 1) : datetime.getMonth() + 1;
var date = datetime.getDate() < 10 ? "0" + datetime.getDate(): datetime.getDate();
var hour = datetime.getHours() < 10 ? "0" + datetime.getHours(): datetime.getHours();
var minute = datetime.getMinutes() < 10 ? "0"+ datetime.getMinutes() : datetime.getMinutes();
var second = datetime.getSeconds() < 10 ? "0"+ datetime.getSeconds() : datetime.getSeconds();
return year + "-" + month + "-" + date + " " + hour + ":" + minute+ ":" + second;
}
</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 {
//这两个成员的命不能变
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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航