easyui+实现ajax分页,EasyUI的datagrid组件结合jsonp实现分页显示跨域数据

前台页面

Untitled Page

$(document).ready(function(){

$("#dg").datagrid({

loader:function(param,success,error){

var rows = 30;

var beginIndex = 0;

$.ajax({

type: "get",

async: false,

url: "{beginIndex:" + beginIndex + ",rows:" + rows + "}",

dataType: "jsonp",

jsonp: "callback",

jsonpCallback:"callback",

success: function(data){

success(data);

},

error: function(xhr){

error(xhr.responseText);

}

});

},

pagination:true,

fit:true,

fitColumns:true,

title:"房间列表",

columns:[[

{field:'roomID',title:'roomID',width:100},

{field:'roomName',title:'roomName',width:100},

{field:'onlineCount',title:'onlineCount',width:100} ,

{field:'userID',title:'userID',userID:100}

]]

})

//var opts = $('#dg').datagrid('options');

var pager = $('#dg').datagrid('getPager');

$(pager).pagination({

pageSize: 30,

pageList: [10,20,30],

onSelectPage:function(pageNumber, pageSize){

var rows = pageSize;

var beginIndex = (pageNumber-1)*rows;

$.ajax({

type: "get",

async: false,

url: "{beginIndex:" + beginIndex + ",rows:" + rows + "}",

dataType: "jsonp",

jsonp: "callback",

jsonpCallback:"callback",

success: function(data){

$('#dg').datagrid('loadData',data);

},

error: function(xhr){

error(xhr.responseText);

}

});

}

});

});

后台代码

package com.work.sample.controller;

import java.io.IOException;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import net.sf.json.JSONObject;

@Controller

public class SampleController {

private static List rooms;

static{

rooms = new ArrayList();

for(int i=1;i<=35;i++){

rooms.add(new Room(i,"房间"+i,i,(long)i));

}

}

@RequestMapping("/sod")

@ResponseBody

public void findByPage(HttpServletRequest request,HttpServletResponse response) throws IOException {

String parameter = request.getParameter("parameter");

JSONObject jsonObj = JSONObject.fromObject(parameter);

Integer beginIndex = (Integer) jsonObj.get("beginIndex");

Integer rows = (Integer) jsonObj.get("rows");

Map result = new HashMap();

result.put("total", rooms.size());

Integer s = beginIndex;

Integer e = beginIndex + rows;

if(e > rooms.size()){

e = rooms.size();

}

result.put("rows", rooms.subList(s, e));

response.setContentType("text/html");

response.setCharacterEncoding("UTF-8");

String jsonStr = "callback(" + JSONObject.fromObject(result).toString() + ")";

response.getWriter().print(jsonStr);

}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值