easyui datagrid 后台分页+排序

本文介绍了如何在EasyUI的datagrid中实现后台分页和排序功能。通过在jsp页面定义table,js加载table,后台controller接收并处理分页参数page、rows、sort、order,使用Collections.sort()进行排序,subList()获取分页数据。同时在service层创建测试数据,并展示了页面排序的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、jsp页面定义table

<div><table id="dg"></table></div>

二、js页面加载table

$(function () {
    test1();
});

var test1 = function () {

    var m_test_name = "测试";
    var pageNumber = 1;
    var pageSize = 20;
    
    init_datagrid();

    function init_datagrid() {
        var arr_columns = test_dg_columns();
        $("#dg").datagrid({
             url: 'temp/test/queryTest',
             singleSelect: true,
             remoteSort: true, //定义从服务器对数据进行排序。
             pagination: true, //在DataGrid控件底部显示分页工具栏。
             pageNumber: pageNumber,
             pageSize: pageSize,
     	     pageList: [10,15,20],
             method: 'post',
             columns: [arr_columns],
             rownumbers: true,
             loadMsg: '正在加载数据',
             checkbox: true,
             title: '表单 -- ' + m_test_name,
             emptyMsg: '列表为空',
             selectOnCheck: false,
             checkOnSelect: false
        });
    }

    function test_dg_columns() {
        var arr = new Array();
        arr.push({"field": "yi", "title": 'test1', "width": '19%', "align": 'center',sortable:true});
        arr.push({"field": "er", "title": 'test2', "width": '20%', "align": 'center',sortable:true});
        arr.push({"field": "san", "title": 'test3', "width": '20%', "align": 'center',sortable:true});
        arr.push({"field": "si", "title": 'test4', "width": '20%', "align": 'center',sortable:true});
        arr.push({"field": "wu", "title": 'test5', "width": '20%', "align": 'center',sortable:true});
        return arr;
    }
    
}

三、后台controller接收前台传来的page、rows、sort、order(由于测试没有从数据库查数据,用的是map,所以排序时map里的list使用了Collections.sort()排序,分页时把map里的list使用subList()获取当前页的数据)

@Controller
@RequestMapping(value="temp/test")
public class TestController extends BaseEntityController<test>{
	
	@Autowired
	TestService testService;
	
	@RequestMapping(value = "queryTest",method=RequestMethod.POST)
	@ResponseBody
	@SystemControllerLog(description = "测试查询")
	public Object queryTest(HttpServletRequest request){
		int pageNumber = Integer.parseInt(request.getParameter("page")); //获取当前页码
		int pageSize = Integer.parseInt(request.getParameter("rows")); //获取每页显示多少行
		String sort = request.getParameter("sort"); //获取排序字段
		String order = request.getParameter("order"); //获取升序降序
		try {
			Map<String, Object> map = testService.querytest();
			List<Map<String, Object>> list = (List<Map<String, Object>>) map.get("rows");
			//排序
			if(StringUtils.isNotBlank(sort)&&StringUtils.isNotBlank(order)) {
				if("asc".equals(order)) { //升序
					Collections.sort(list, new Comparator<Map<String, Object>>() {
						
						@Override
						public int compare(Map<String, Object> o1, Map<String, Object> o2) {
							if(o1.get(sort) instanceof Integer && o2.get(sort) instanceof Integer) { //如果是integer整数类型,比较两个数,大于0表示正序,小于0表示逆序
								return new Integer((int)o1.get(sort)).compareTo(new Integer((int)o2.get(sort)));
							}
							if(o1.get(sort) instanceof Double && o2.get(sort) instanceof Double) { //如果是Double整数类型,比较两个数,大于0表示正序,小于0表示逆序
								return new Double((double)o1.get(sort)).compareTo(new Double((double)o2.get(sort)));
							}
							return ((String) o1.get(sort)).length()-((String) o2.get(sort)).length(); //字符串类型比较长度
						}
						
					});
				}else { //降序
					Collections.sort(list, new Comparator<Map<String, Object>>() {
						
						@Override
						public int compare(Map<String, Object> o1, Map<String, Object> o2) {
							if(o1.get(sort) instanceof Integer && o2.get(sort) instanceof Integer) { //如果是integer整数类型,比较两个数,大于0表示正序,小于0表示逆序
								return new Integer((int)o2.get(sort)).compareTo(new Integer((int)o1.get(sort)));
							}
							if(o1.get(sort) instanceof Double && o2.get(sort) instanceof Double) { //如果是Double整数类型,比较两个数,大于0表示正序,小于0表示逆序
								return new Double((double)o2.get(sort)).compareTo(new Double((double)o1.get(sort)));
							}
							return ((String) o2.get(sort)).length()-((String) o1.get(sort)).length(); //字符串类型比较长度
						}
						
					});
				}
				
			}
			//分页
			int fromIndex = pageSize*(pageNumber-1);
			int toIndex = pageSize*pageNumber;
			int total = (int)map.get("total"); //总条数
			if(toIndex>total) {
				toIndex = total;
			}
			list = list.subList(fromIndex, toIndex); //分页
			map.put("rows", list);
			return map;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return "failed";
	  }
	
}

注:public int compare(Object o1, Object o2) 返回一个基本类型的整型
如果要按照升序排序,
则o1 小于o2,返回-1(负数),相等返回0,01大于02返回1(正数)
如果要按照降序排序
 则o1 小于o2,返回1(正数),相等返回0,01大于02返回-1(负数)

如果比大小可以用compareTo方法

public int compareTo( NumberSubClass referenceName )
public class Test{ 
   public static void main(String args[]){
      Integer x = 5;
      System.out.println(x.compareTo(3));
      System.out.println(x.compareTo(5));
      System.out.println(x.compareTo(8));            
     }
}
1
0
-1

四、在service里定义测试用的数据

public Map<String, Object> querytest() {
	List<Map<String, Object>> l = new ArrayList<>();
	Map<String, Object> map = new HashMap<>();
	int total = 30;
	map.put("total", total);
	for (int i = 1; i <= total; i++) {
		Map<String, Object> m = new HashMap<>();
		m.put("yi", i*2+0.5);
		m.put("er", i+47);
		m.put("san", "kasaki"+i);
		m.put("si", i);
		m.put("wu", 500/i);
		l.add(m);
	}
	map.put("rows", l);
	return map;
}

五、页面效果

点击排序

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值