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

随机推荐

Linux下安装JRE
(1)下载jre-7u5-linux-i586.tar.gz,上传至/root目录 (2)执行tar -zxf jre-7u5-linux-i586.tar.gz (3)mv jre1.7.0_05 ...
Spring @Resource注解
@Resource注解 @Resource 注解被用来激活一个命名资源(named resource)的依赖注入,在JavaEE应用程序中,该注解被典型地转换为绑定于JNDI context中的一 ...
PDO获取数据的方法fetch()、fetchAll()、setFetchMode()、bindColumn()
PDO的数据获取方法与其他数据库扩展都非常类似,只要成功执行SELECT查询,都会有结果集对象产生.不管是使用PDO对象中的query()方法,还是使用prepare()和execute()等方法结合 ...
多线程下载工具-Axel
1.安装: apt-get install axel 2.用法: axel 参数文件下载地址 3.常用参数: -n 指定线程数 -o 指定文件存储位置(如不指定,默认存在当前位置(pwd)) -q ...
部署django - Apache + mod_wsgi + windows
部署django - Apache + mod_wsgi + windows 1.环境 django 1.6.2 python 3.3 32位 apache 2.4.7 32位一个可以使用的djan ...
1 初级.net web工程师，在工作中都做些什么
初级.Net Web工程师,在工作中都做些神马? 职责初级.Net Web工程师的主要职责,就是按比较详细的要求去完成代码. 比较详细的要求是指:一般会把页面式样.功能的描述.数据库结构.性能要 ...
GridView用法的修改和删除
(前台) <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="Fa ...
STL insert()使用
下面我以vector的insert()为例: c++ 98: single element (1) iterator insert (iterator position, const value_ty ...
Button的设置及各种属性
(1)UIButton类继承自UIControl,而UIControl继承自UIView,因为UIView就是个矩形区域,所以UIButton实例化的对象其实都是一个矩形,虽然有各种圆角.增加联系人. ...
关于FTP操作的功能类
自己在用的FTP类,实现了检查FTP链接以及返回FTP没有反应的情况. public delegate void ShowError(string content, string title); // ...

springmvc + jquery easyui实现分页显示

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

随机推荐

热门专题