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

随机推荐

C#中foreach语句的迭代器实现机制
C#中的foreach语句可用于循环遍历某个集合中的元素,而所有的只要支持了IEnumerable或IEnumerable<T>泛型接口的类型都是可以用foreach遍历的.其具体的遍历 ...
BULK SQL
DECLARE TYPE TY_EMP IS TABLE OF EMP%ROWTYPE; --如果是IS TABLE OF行类型(ROWTYPE.RECORD等)就是二维 V_Emp TY_EMP; ...
Python之路：Python简介
Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间他为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言的一种继承 ...
document.domain与js跨域的问题
以前如果要使iframe里面的脚本能访问parent的内容,但iframe和parent的二级域名相同,那一般都会在两者都写上document.domain="xxx.com" 以 ...
爬虫框架Scrapy
前面十章爬虫笔记陆陆续续记录了一些简单的Python爬虫知识, 用来解决简单的贴吧下载,绩点运算自然不在话下. 不过要想批量下载大量的内容,比如知乎的所有的问答,那便显得游刃不有余了点. 于是乎,爬虫 ...
IT第二十天 - 面向对象编程思想、抽象类、异常处理、程序操作日志记录、本周总结 ★★★
IT第二十天上午面向对象编程思想 1.组装电脑的设计: (1)电脑的组成:显示器+机箱 (2)机箱的组成:电源+主板+硬盘 (3)主板所包含的部件:cpu+内存+PCI接口+usb接口 (4)PC ...
BZOJ 1029: [JSOI2007]建筑抢修
1029: [JSOI2007]建筑抢修 Description 小刚在玩JSOI提供的一个称之为“建筑抢修”的电脑游戏:经过了一场激烈的战斗,T部落消灭了所有z部落的入侵者.但是T部落的基地里已经有 ...
socket.io+angular.js+express.js做个聊天应用(四)
接着上一篇使用angularjs构建聊天室的client <!doctype html> <html ng-app="justChatting"> < ...
TCP/IP之TCP连接的建立与中止状态分析
TCP连接的建立可以简单的称为三次握手,而连接的中止则可以叫做四次握手. 1.连接的建立: c端发起请求同步(用SYN段等于1的TCP报文),确认某个端口是否监听: s端应答(用ACK段等于1的TCP ...
ThinkPHP - 关联模型 - 多对多
表结构: 映射关系: UserRelationModel会取UserRelation为表名称.所以要自定义表名称: //定义主表名称protected $tableName = 'User'; < ...

springmvc + jquery easyui实现分页显示

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

随机推荐

热门专题