java easyui 分页_Spring mvc+easyui做列表展示及分页

Spring mvc有一个注解@ResponseBody可以自己将返回数据解析成json，不用在response.getWriter(),设置response的编码之类的。

1、首先在spring-mvc.xml中配置如下

class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">

application/json;charset=UTF-8

class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" />

class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">

class="com.liyi.test.common.UTF8StringHttpMessageConverter" />

别忘了，在下面还有一个UTF8StringHttpMessageConcerter类需要引入

package com.liyi.test.common;

import java.io.IOException;

import java.io.OutputStreamWriter;

import java.nio.charset.Charset;

import java.util.Arrays;

import java.util.List;

import org.springframework.http.HttpOutputMessage;

import org.springframework.http.MediaType;

import org.springframework.http.converter.StringHttpMessageConverter;

import org.springframework.util.FileCopyUtils;

public class UTF8StringHttpMessageConverter extends StringHttpMessageConverter {

private static final MediaType utf8 = new MediaType("text", "plain", Charset.forName("UTF-8"));

private boolean writeAcceptCharset = true;

@Override

protected MediaType getDefaultContentType(String dumy) {

return utf8;

}

protected List getAcceptedCharsets() {

return Arrays.asList(utf8.getCharSet());

}

protected void writeInternal(String s, HttpOutputMessage outputMessage)    throws IOException {

if (this.writeAcceptCharset) {

outputMessage.getHeaders().setAcceptCharset(getAcceptedCharsets());

}

Charset charset = utf8.getCharSet();

FileCopyUtils.copy(s, new OutputStreamWriter(outputMessage.getBody(), charset));

}

public boolean isWriteAcceptCharset() {

return writeAcceptCharset;

}

public void setWriteAcceptCharset(boolean writeAcceptCharset) {

this.writeAcceptCharset = writeAcceptCharset;

}

}

2、配置好了，就可以写展示列表的后台代码了，以下，有两个方法，一个是做页面跳转用的，一个是用于ajax请求数据的。

@RequestMapping("/toUserList")

public String redirctUserList(){

return "user/new_user_list";

}

@ResponseBody

@RequestMapping("/userList")

public String userList(@RequestParam Map conds){

//默认每页10条

int pageSize = 10;

//默认第一页 计算开始条数

int currentPage = 1;

//获取页面传来每页显示条数

String row = (String) conds.get("rows");

//获取页面传来当前页码

String page = (String) conds.get("page");

if(null!=row&&!"".equals(row)){

pageSize=Integer.valueOf(row);

}

if(null!=page&&!"".equals(page)){

currentPage= Integer.valueOf(page);

}

Map map = new HashMap();

//计算一共有多少条

int count = userService.getTotalPage();

map.put("pageCount",pageSize);

//计算从第几条开始

map.put("currentPage",new PageUtil().getCurrent(currentPage,pageSize));

List list = userService.findAll(map);

Map map1 = new HashMap();

map1.put("total", count);

map1.put("rows",list);

String json = JSON.toJSONString(map1, true);

System.out.println(json);

return json;

}

只需要把你需要返回的数据，用fastjson将对象转成json串传入到页面，页面直接就可以取到。其中要注意，easyui展示列表的json如下：

[

{

"total": 13,

"rows": [

{

"createTime": 1438678875000,

"id": 1,

"mobile": "123456",

"name": "liyi",

"pwd": "123456"

},

{

"createTime": 1438679219000,

"id": 2,

"mobile": "123456",

"name": "scc",

"pwd": "123456"

},

{

"createTime": 1438679264000,

"id": 3,

"mobile": "123456",

"name": "diudiu",

"pwd": "123456"

},

{

"createTime": 1438679338000,

"id": 4,

"mobile": "123456",

"name": "xiaopaigu",

"pwd": "123456"

},

{

"createTime": 1438680558000,

"id": 5,

"mobile": "123456",

"name": "iphone",

"pwd": "123456"

},

{

"createTime": 1438682344000,

"id": 6,

"mobile": "123456",

"name": "iphone1",

"pwd": "123456"

},

{

"createTime": 1438754235000,

"id": 7,

"mobile": "123456",

"name": "abc",

"pwd": "123456"

},

{

"createTime": 1438852983000,

"id": 8,

"mobile": "11",

"name": "11",

"pwd": "11"

},

{

"createTime": 1438914359000,

"id": 9,

"mobile": "123456",

"name": "123456",

"pwd": "456789"

},

{

"createTime": 1439530418000,

"id": 10,

"mobile": "123",

"name": "123",

"pwd": "123"

}

]

}

]

3、jsp页面首先引入easyui的js 以及css

$(function(){

$('#dg').datagrid({

url:'${app}/userController/userList.do',

columns:[[

{field:'name',title:'姓名',width:100 },

{field:'mobile',title:'手机号',width:100},

{field:'_operate',width:80,align:'center',formatter:function(value,rec){

return "编辑";

},title:'操作'}

]],

toolbar: [{

iconCls: 'icon-add',

handler: function(){alert('编辑按钮')}

},'-',{

iconCls: 'icon-help',

handler: function(){alert('帮助按钮')}

}],

fitColumns:true,

striped:true,

pagination:true,

rownumbers:true,

pageNumber:1,

pageSize:10,

pageList:[10,20,30,40,50]

});

})

4、分页你可以用firefox观察一下，他会传入到后台两个参数，一个是当前页page，一个是rows每页的数量，根据我上篇文章的分页工具即可。在找到上面的List展示方法就可以了。