springmvc + jquery easyui实现分页显示

如有不明确的地方，戏迎增加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

springmvc + jquery easyui实现分页显示的更多相关文章

EasyUI Datagrid 分页显示（客户端）
转自:https://blog.csdn.net/metal1/article/details/17536185 EasyUI Datagrid 分页显示(客户端) By ZYZ 在使用JQuery ...
SpringMvc+jquery easyui模块开发7步骤
搞了一段java的开发,总结出模块开发经验: SpringMvc+jquery easyui模块开发7步骤:1) 数据表(table): 定义表结构并创建数据表t_use ...
jquery easyui datagrid 分页详解
前些天用jquery easyui的table easyui-datagrid做分页显示的时候,折腾了很久,后来终于解决了.其实不难,最主要我不是很熟悉前端的东西. table easyui-data ...
SpringMVC+MyBatis+EasyUI 实现分页查询
user_list.jsp <%@ page import="com.ssm.entity.User" %> <%@ page pageEncoding=&quo ...
jquery easyui datagrid 分页详解
由于项目原因,用了jquery easyui 感觉界面不错,皮肤样式少点,可是官网最近打不开了,资料比较少,给的demo没有想要的效果,今天在用datagrid 做分页显示的时候,折腾了半天,网上的资 ...
jquery easyui菜单树显示
目前做了一个easyui项目需要显示多级菜单,菜单配置到数据库中,因此每级菜单都需要到数据库中取,用了jQuery EasyUI方便多了. 效果体验:http://hovertree.com/texi ...
jquery easyui datagrid 分页详解（java）
1.首先引入easyui包,可以在官方网站下载,http://www.jeasyui.com/download/index.php <link rel="stylesheet" ...
jquery easyui datagrid 分页实现---善良公社项目
接着上篇文章,接下来给大家分享分页的实现,分页其实多多少少见过很有几种,框架中带的图片都特别的好看,会给用户以好的使用效果,具体实现,需要自己来补充代码: 图示1: 通常情况下页面数据的分页显示分成真 ...
jquery easyui datagrid 分页实现
通常情况下页面数据的分页显示分成真假两种.真分页是依靠后台查询时控制调出数据的数量来实现分页,也就是说页面在后台对数据进行处理,仅传输当前需要页的数据到前台来显示.而假分页则是后台一次性将所有的数据一 ...

随机推荐

13. Roman to Integer
Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from 1 t ...
poj 1080
http://poj.org/problem?id=1080 知识点 :最长公共子序列要点: 转移方程 f[i][j] = max{ f[i-i][j]+score[s1[i-1]]['-'], ...
JS常用方法函数（1）
1.字符串长度截取 function cutstr(str, len) { var temp, icount = 0, patrn = /[^\x00-\xff]/, strre = "&q ...
Qt 技巧：解决未解析的SSL问题
因为https访问需要用到SSL认证,而QT默认是不支持SSL认证,所以在使用之前必须先做一些准备工作: 需要安装OpenSSL库: 1.首先打开http://slproweb.com/product ...
Python: 在Unicode和普通字符串之间转换
Unicode字符串可以用多种方式编码为普通字符串, 依照你所选择的编码(encoding):  Toggle line nu ...
cocos2d-x游戏开发系列教程-超级玛丽07-CMGameMap(四)-马里奥平移
上一篇博文提到,程序如何获取键盘输入,也就是D键按下,程序获取到前进指令,那么获取到前进指令之后,马里奥是如何前进的呢,这篇文章我们重点讨论这个问题. 马里奥的移动,依旧是在帧刷新函数中,这个调用过程 ...
VC++中的DDX和DDV
DDX/DDV 通过使用ClassWizard向对话类添加成员变量,你可以利用ClassWizard所提供的高效特征,为对话数据交换和对话数据验证自动生成源代码,也就是人们所熟知的DDX/DDV ...
Python 連接 MySQL
Python 連接 MySQL MySQL 是十分流行的開源資料庫系統,很多網站也是使用 MySQL 作為後台資料儲存,而 Python 要連接 MySQL 可以使用 MySQL 模組.MySQLdb ...
POJ 1741 Tree【Tree，点分治】
树上的算法真的很有意思……哈哈. 给一棵边带权树,问两点之间的距离小于等于K的点对有多少个. 将无根树转化成有根树进行观察.满足条件的点对有两种情况:两个点的路径横跨树根,两个点位于同一颗子树中. 如 ...
第一种：NStread
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...

springmvc + jquery easyui实现分页显示

springmvc + jquery easyui实现分页显示的更多相关文章

随机推荐

热门专题