EasyUi 分页 和 表格数据加载
这里说明的是将说有数据先返回到前端再由前端去分页，性能可能没有先在后台分好页再返回给前端高
但如果操作不涉及大数据的话也没什么大问题，具体问题具体分析
要使用分页控件首先要声明初始化一下：
//设置分页控件
var p = $("#tt").datagrid('getPager'); //tt为表格id
$(p).pagination({
// pageSize: 10,//每页显示的记录条数，默认为10
pageList: [5,10,15],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
});
然后是前端的分页代码（网上的）：
function pagerFilter(data){
if (typeof data.length == 'number' && typeof data.splice == 'function'){ // is array
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
//pageSize: 10,//每页显示的记录条数，默认为10 //这里不设置的画分页页数选择函数会正确调用，否则每次点击下一页
pageList: [5,10,15],//可以设置每页记录条数的列表 //pageSize都会变回设置的值
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
onChangePageSize:function(){
},
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',data);
}
});
if (!data.originalRows){
data.originalRows = (data.rows);
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
function doSearch(){
userName = $("#itemid").val();
roleName = $("#roleName").val();
var urlRequest="/account/searchByUserName?userName="+userName+"&roleName=" + roleName; //相对路径请求
$.getJSON(urlRequest, null, function(json) { //get方法获取json数据，java代码之前写过一篇了
/* $(function(){
ccb={total:json.length,rows:[json[0]]};
$("#tt").datagrid('loadData', ccb);
alert('here');
}); */
ccb = { //Json数据继续封装
"total": json.length,
"rows": json
};
$(function(){
$('#tt').datagrid({loadFilter:pagerFilter}).datagrid('loadData', ccb);
});
/* $("#tt").datagrid('loadData', { //加载数据类似上面的
"total": json.length,
"rows": json
}); */
});
}
Html代码顺便粘一下：
<body>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"> </div>
<div>输入查询关键字，点击查询搜索</div>
</div> <table id="tt" class="easyui-datagrid" style="width:1130px;height:540px"
title="Searching" iconCls="icon-search" toolbar="#tb"
rownumbers="true" pagination="true">
<thead>
<tr>
<th field="userName" width="150">用户名</th>
<th field="roleName" width="150">角色名</th>
<th field="telphone" width=150" >电话</th>
<th field="email" width="150" >邮件</th>
<th field="sex" width="50">性别</th>
<th field="createtime" width="160" align="center">账户创建时间</th>
</tr>
</thead>
</table>
<div id="tb" style="padding:3px">
<span>用户名:</span>
<input id="itemid" style="line-height:26px;border:1px solid #ccc" onkeydown='if(event.keyCode==13){doSearch();}'>
<span>角色名:</span>
<select id="roleName" style="line-height:26px;border:1px solid #ccc" onchange="doSelect();">
<option value="all" >所有角色</option>
<option value="超级管理员">超级管理员</option>
<option value="管理员">管理员</option>
</select>
<a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">查询</a>
</div>
</body>
EasyUi 分页 和 表格数据加载的更多相关文章
- jqgrid 分页时，清空原表格数据加载返回的新数据
由于,我们是动态分页,分页后的数据是在触发分页后动态加载而来.如何使jqgrid清空原数据而加载新数据? 1)调用jqgrid的 clearGridData 方法清空表格数据 2)调用jqgrid的 ...
- jquery easyui 显示和关闭数据加载的遮罩
$('#yearReportTable').datagrid('loading');//打开等待div $('#yearReportTable').datagrid('loaded');//关闭等待d ...
- [转载]再次谈谈easyui datagrid 的数据加载
这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...
- 谈谈easyui datagrid 的数据加载(转)
这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...
- 再次谈谈easyui datagrid 的数据加载
from:http://www.easyui.info/archives/204.html 这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实ea ...
- 谈谈easyui datagrid 的数据加载
文章目录 1url方式加载数据 1.1调用方式 1.2相关方法 1.3二次加载问题 2加载本地数据方式 2.1调用方式 2.2如何分页 2.3加载中效果 2.4如何不统计总数 这篇文章只谈jQuery ...
- jQuery easyui datagrid 的数据加载
其实easyuidatagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法,这种方法用于加载本地js数据(非ur ...
- Bootstrap Table表格一直加载(load)不了数据-解决办法
bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一 ...
- hibernate框架学习第六天：QBC、分页查询、投影、数据加载策略、二级缓存
QBC查询 1.简单查询 Criteria c = s.createCriteria(TeacherModel.class); 2.获取查询结果 多条:list 单挑:uniqueResult 3.分 ...
随机推荐
- profile
项目开发中,使用git最为版本控制工具,往往会建立开发分支.测试分支和生产分支. 各个分支的数据库url,所依赖的接口url可能不同,直接配置的话,在合并分支时往往出现冲突.使用profile可以有效 ...
- Redis和Memcache对比及选择(转载)
- javascript大神修炼记（7）——OOP思想（多态）
读者朋友们大家好,今天我们就接着前面的内容讲,前面我们已经讲到了继承,今天我们就来讲OOP目前最后一个体现,那就是多态,因为javascript语言的灵活性,所以我们是没有办法使用接口的,所以这也给j ...
- 20145221高其&20145326蔡馨熠《信息安全系统设计基础》实验二 固件设计
20145221高其&20145326蔡馨熠<信息安全系统设计基础>实验二 固件设计 实验目的与要求 了解多线程程序设计的基本原理,学习 pthread 库函数的使用. 了解在 l ...
- Thinking in Java——笔记(9)
Polymorphism Abstract classes and methods If you have an abstract class, objects of that specific cl ...
- $(document).ready(function(){});
$(document).ready 里的代码是在页面内容都加载完才执行的,你直接写到script标签里,当页面加载完这个script标签就会执行里边的代码了,如果你标签里执行的代码调用了当前还没加载过 ...
- Yii常用路径说明
原作者地址:http://www.kuitao8.com/20140520/2483.shtml //framework路径 Yii::getFrameworkPath(); //protected/ ...
- Android百分比布局支持库介绍——com.android.support:percent（转）
转载自http://www.apkbus.com/forum.php?mod=viewthread&tid=244752&extra=&_dsign=0b699c42 在此之前 ...
- HTTP下载文件名称编码说明
HTTP下载保存文件名 下载文件需要保存的名称 在响应报文头中 Content-Disposition 响应报文头域中指定, 例如 Content-Disposition: attachment; f ...
- SpringMVC源码剖析（二）- DispatcherServlet的前世今生
上一篇文章<SpringMVC源码剖析(一)- 从抽象和接口说起>中,我介绍了一次典型的SpringMVC请求处理过程中,相继粉墨登场的各种核心类和接口.我刻意忽略了源码中的处理细节,只列 ...