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

随机推荐

COM编程-注册DLL形式的COM服务器
这篇文章不涉及任何的有关COM的技术的讲解,仅仅的说一下写好的DLL形式的COM怎么使用.如下图所示,我已经有了一个DLL形式的COM服务器和一个使用COM服务器的COM客户端: 现在这个DLL的CO ...
mongoDB初接触
首先去官网http://www.mongodb.org/ 下载mongoDB 下载后解压D:\mongodb 创建两个新文件夹data以及log 新建一个文件命名为mongodb.cfg dbpath ...
AOP(转)
AOP是什么?AOP(Aspect-Oriented Programming),面向切面编程,看着是跟OOP(面向对象编程)挺相近的,但实际上又有什么区别呢?OOP具有封装,继承,多态等东西来定义从上 ...
Oracle Database 12c Release 1 Installation On Oracle Linux 6.4 x86_64
Create groups and users [root@vmdb12c ~]# groupadd oinstall [root@vmdb12c ~]# groupadd dba [root@vmd ...
H面试程序（16）：简单选择排序
#include<stdio.h> #include<assert.h> void display(int * a, int n) { assert(a); for(int i ...
POJ--1300--Door Man【推断无向图欧拉通路】
链接:http://poj.org/problem?id=1300 题意:有n个房间.每一个房间有若干个门和别的房间相连.管家从m房间開始走.要回到自己的住处(0),问是否有一条路能够走遍全部的门而且 ...
Android 一个绚丽的loading动效分析与实现！
http://blog.csdn.net/tianjian4592/article/details/44538605 前两天我们这边的头儿给我说,有个 gif 动效很不错,可以考虑用来做项目里的loa ...
Linux下查看二进制文件命令
一.在Linux下查看二进制文件的软件: xxd hexdump 二.编辑: 1.biew 2.hexedit 3.vim Vim 来编辑二进制文件.Vim 本非为此而设计的,因而有若干局限.但你能读 ...
Best Component for Bitmap Image
The best is to purchase ImageEn and use the latest version. Coz nothing compares to ImageEn.... But ...
Android 修改底部导航栏navigationbar的颜色
Android 修改底部导航栏navigationbar的颜色 getWindow().setNavigationBarColor(Color.BLUE); //写法一 getWindow().set ...

springmvc + jquery easyui实现分页显示

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

随机推荐

热门专题