<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String basepath = request.getContextPath();
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="<%=basepath%>/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="<%=basepath%>/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
href="<%=basepath%>/easyui/demo.css">
<script type="text/javascript" src="<%=basepath%>/easyui/jquery.min.js"></script>
<script type="text/javascript"
src="<%=basepath%>/easyui/jquery.easyui.min.js"></script>
</head>
<body>

<br>
<h2>Client Side Pagination in DataGrid</h2>
<p>This sample shows how to implement client side pagination in
DataGrid.</p>
<div style="margin: 20px 0;"></div>

<table id="dg" title="Client Side Pagination"
style="width: 700px; height: 300px"
data-options="
rownumbers:true,
singleSelect:true,
autoRowHeight:false,
pagination:true,
pageSize:10">
<thead>
<tr>
<th field="id" width="30%">id</th>
<th field="userName" width="30%">userName</th>
<th field="age" width="30%">age</th>
</tr>
</thead>
</table>
<script>
(function($) {
function pagerFilter(data) {
if ($.isArray(data)) { // is array
data = {
total : data.length,
rows : data
}
}
var dg = $(this);
var state = dg.data('datagrid');
var opts = dg.datagrid('options');
if (!state.allRows) {
state.allRows = (data.rows);
}
var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = $.extend(true, [], state.allRows.slice(start, end));
return data;
}

var loadDataMethod = $.fn.datagrid.methods.loadData;
$.extend($.fn.datagrid.methods,
{
clientPaging : function(jq) {
return jq.each(function() {
var dg = $(this);
var state = dg.data('datagrid');
var opts = state.options;
opts.loadFilter = pagerFilter;
var onBeforeLoad = opts.onBeforeLoad;
opts.onBeforeLoad = function(param) {
state.allRows = null;
return onBeforeLoad.call(this, param);
}
dg.datagrid('getPager').pagination({
onSelectPage : function(pageNum, pageSize) {
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
$(this).pagination('refresh', {
pageNumber : pageNum,
pageSize : pageSize
});
dg.datagrid('loadData', state.allRows);
}
});
$(this).datagrid('loadData', state.data);
if (opts.url) {
$(this).datagrid('reload');
}
});
},
loadData : function(jq, data) {
jq.each(function() {
$(this).data('datagrid').allRows = null;
});
return loadDataMethod.call($.fn.datagrid.methods,
jq, data);
},
getAllRows : function(jq) {
return jq.data('datagrid').allRows;
}
})
})(jQuery);

function getData() {
var rows = "";
/* for (var i = 1; i <= 800; i++) {
var amount = Math.floor(Math.random() * 1000);
var price = Math.floor(Math.random() * 1000);
rows.push({
inv : 'Inv No ' + i,
date : $.fn.datebox.defaults.formatter(new Date()),
name : 'Name ' + i,
amount : amount,
price : price,
cost : amount * price,
note : 'Note ' + i
});
} */

$.ajax({
method : 'POST',
url : '/egoTest/user/getAjaxUser2.do',
async : false,
dataType : 'json',
success : function(data) {
rows = data;
},
error : function() {
alert('error');
}
});
return rows;
}

$(function() {
$('#dg').datagrid({
data : getData()
}).datagrid('clientPaging');
});
</script>
<br><br><br><br><br>
a index jsp page ! ${list}
<br>
<table border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="100"><input type="checkBox" name="checkBox" /></th>
<th field="userId" width="100">用户ID</th>
<th field="userName" width="100">名称</th>
<th field="bigDepartId" width="100">年龄</th>
<th field="operation" width="100">操作</th>
</tr>
</thead>
<c:forEach items="${uList }" var="u">
<tr class="${status.index%2==1?'even':'odd' }">
<td><input type="checkBox" name="checkBox" /></td>
<td>${u.id}</td>
<td>${u.userName }</td>
<td>${u.age }</td>
<td><a href="/springMVC11/user/getUser.do?id=${u.id }">修改</a></td>
</tr>
</c:forEach>
</table>

</body>
</html>

@RequestMapping("/getAjaxUser2")
public void getAjaxUser2(HttpServletRequest request,
HttpServletResponse response, ModelMap modelMap) {
try {
response.setContentType( "text/html;charset=UTF-8");
List<User> uList = userService.getAllUser();
Map<String, Object> map = new HashMap<String, Object>();
// map.put( "total",total);
map.put("allRows", 57);
map.put("rows", uList);

JSONObject json = JSONObject.fromObject(map);
// String str = "aabbcc";
PrintWriter pw = response.getWriter();
pw.write(json.toString());
pw.flush();
pw.close();
} catch (Exception e) {
e.printStackTrace();
}
}

easyui datagrid加载数据和分页的更多相关文章

  1. 解决easyui datagrid加载数据时，checkbox列没有根据checkbox的值来确定是否选中

    背景:   昨天帮朋友做一个easyui datagrid的小实例时,才发现easyui datagrid的checkbox列,没有根据值为true或false来选中checkbox,当时感觉太让人失 ...

  2. Easyui datagrid加载数据时默认全选的问题

    问题描述: 最近使用 Easyui datagrid 展示数据,之前一直使用很正常,今天出现了一个怪异问题 加载数据后,只要点击选中列 ck 的任意行或多行,再刷新时整个datagrid的所有数据都 ...

  3. easyui datagrid加载数据的三种方式

    1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...

  4. easyui datagrid加载数据的两种方式

    1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...

  5. jquery easyui使用（三）······datagrid加载数据(已解决)

    <div id="table_Data"> </div> $("#table_Data").datagrid({ toolbar: '# ...

  6. easyui datagrid 加载静态文件中的json数据

    本文主要介绍easyui datagrid 怎么加载静态文件里的json数据,开发环境vs2012, 一.json文件所处的位置 二.json文件内容 {"total":28,&q ...

  7. easyui datagrid加载成功之后选定并获取首行数据

    //加载成功之后,选定并获取首行数据 onLoadSuccess:function(data){ alert("grid加载成功"); var rows=$('test').dat ...

  8. easyui datagrid 加载两次请求，触发两次ajax 请求 问题

    datagrid初始化的时候请求两次URL 两种情况 1. <table id="gridview" class="easyui-datagrid"> ...

  9. easyui datagrid 加载 历险记（dom中已经加载，fit:true 时改变浏览器大小是会显示出来）

    (dom中已经加载,fit:true 时改变浏览器大小是会显示出来) 第一个想到的就是resize datagird  大小!可是没有用 ... 答案是加载的的div height为0导至的(//To ...

随机推荐

  1. html5页面平滑切换实现以及问题（20160120更新）

    注:本文是基于手机端 Hybrid APP 讨论,而不是普通的PC端网页 >> 之前的页面跳转方式: 比如有这两个页面:A.html  B.html,  A B 是纯HTML实现,没有采用 ...

  2. 九度 1494：Dota(完全背包)

    题目描述: 大家都知道在dota游戏中,装备是对于英雄来说十分重要的要素.英雄们不仅可以购买单个的装备,甚至某些特定的装备组合能够合成更强的装备.为了简化问题,我们将每个装备对于英雄的功能抽象为一个整 ...

  3. 找不同diff-打补丁patch

    Q:为什么要找不同,为什么要打补丁? A: 在Linux应用中,作为DBA,我们知道MySQL跑在Linux系统之上,数据库最重要的追求就是性能,“稳”是重中之重,所以不能动不动就是换系统或是换这换那 ...

  4. WebService之CXF

    一.配置环境变量(Windows系统下要重启) 1.JAVA_HOME即JDK安装路径bin上一级,java -version命令验证 2.CXF_HOME即cxf安装路径bin上一级,cxf解压包下 ...

  5. RF实现多次失败重跑结果合并的基础方法和优化方法

    实现思路:通过分次执行失败案例重跑,然后通过结果文件合并命令实现多次失败重跑结果文件的合并,并输出合并后的log和report文件: 说明:具体失败案例重跑命令和结果文件合并命令请参考本博客其他相关章 ...

  6. iOS开发-编译出错 duplicate symbols for architecture x86_64

    今天对原来项目文件进行重新整理,根据文件内容进行分类,结果复制粘贴时没注意把一个文件复制了两遍 编译的时候就出现Duplicate Symbol Error 在网上搜素了一圈发现也有人遇到过这个问题, ...

  7. Android学习之适配器SimpleCursorAdapter

    三.   SimpleCursorAdapter与SimpleAdapter用法相近.只是将List对象换成了Cursor对象.而且SimpleCursorAdapter类构造方法的第四个参数from ...

  8. springbatch---->springbatch的使用（三）

    这里我们对上篇博客的例子做一个修改性的测试来学习一下springbatch的一些关于chunk的一些有用的特性.我渐渐能意会到,深刻并不等于接近事实. springbatch的学习 一.chunk的s ...

  9. |和||、&&和&

    |和||.&&和& | : 会检查每一个 条件的真伪,再做“或”运算 ||: 按照条件写的顺序,直到一个为true时,后面的条件则不再检查,直接进入条件 & : 会检查 ...

  10. 【咸鱼教程】Egret中可长按复制的文本（例如复制优惠码)

    一 实际效果二 实现原理三 源码下载 在egret中实现长按复制文本效果,一般用于复制优惠码什么的. 一 实际效果         二 实现原理 在egret的游戏元素都是绘制在canvas上的,我们 ...