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 分页实现
通常情况下页面数据的分页显示分成真假两种.真分页是依靠后台查询时控制调出数据的数量来实现分页,也就是说页面在后台对数据进行处理,仅传输当前需要页的数据到前台来显示.而假分页则是后台一次性将所有的数据一 ...

随机推荐

Python之路Day14
主要内容:jQuery进阶.CSS伪类和伪元素.jQuery插件 tab菜单样式 checkbox全选.反选位置:scrollTop和offset 事件:两种绑定事件的方式和委托delegate a ...
word2vec代码解释
以前看的国外的一篇文章,用代码解释word2vec训练过程,觉得写的不错,转过来了原文链接 http://nbviewer.jupyter.org/github/dolaameng/tutorial ...
2013 南京邀请赛 A play the dice 求概率
/** 大意:给定一个色子,有n个面,每一个面上有一个数字,在其中的m个面上有特殊的颜色,当掷出的色子出现这m个颜色之一时,可以再掷一次..求其最后的期望思路:假设期望为ans 4 ans = 1 ...
python urllib和urllib2 区别
python有一个基础的库叫httplib.httplib实现了HTTP和HTTPS的客户端协议,一般不直接使用,在python更高层的封装模块中(urllib,urllib2)使用了它的http实现 ...
基于visual Studio2013解决C语言竞赛题之0202坐标转换
题目
NOIP2015
现在来总结一下. 斗地主这题的题目描述感觉不太清晰,当时有很多人去问,但都没有得到任何回应.好吧,虽然我也是似懂非懂,但是就算看清楚了题目又能怎么样呢. 首先这题只能够搜索吧,或者说是DP,不过有很 ...
CSS实现背景图尺寸不随浏览器大小而变化的两种方法
一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看一些网站的首页 ...
ARP地址解析协议
ARP地址解析协议:为IP地址到相应的硬件地址之间提供动态映射. 下面图为例说明地址解析协议的详细工作流程. 结合图中的序号进行说明. client通过FTP协议连接server时,首先解析器会把主机 ...
Linux CPU 负载度量公式
一个top命令不就行了么?顶多再加一些管道什么的过滤一下.我一开始也是这么想得.其实还可以理解的更多. 首先一个问题,是统计某个时间点的CPU负载,还是某个时间段的? 为了画折线图报表,一般横坐标都是 ...
学习OpenBlas
编译从OpenBlas Home Page 上下载源代码.make, make install 使用 level 1 向量-向量操作 #include <iostream> #incl ...

springmvc + jquery easyui实现分页显示

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

随机推荐

热门专题