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.分 ...
随机推荐
- 【转】发布一个基于NGUI编写的UI框架
发布一个基于NGUI编写的UI框架 1.加载,显示,隐藏,关闭页面,根据标示获得相应界面实例 2.提供界面显示隐藏动画接口 3.单独界面层级,Collider,背景管理 4.根据存储的导航信息完成界面 ...
- 主机与虚拟机通信：以主机VS2010连接虚拟机MySql为例
1.首先解决环境配置.网络互相通信的问题: 主机:Win7 32bit.虚拟机 Winxp 32bit(不要鄙视我不大会用unix之类的东西).使用virtualBox安装. 网络:虚拟机配置成Bri ...
- 【转】基于 CoreText 实现的高性能 UITableView
引起UITableView卡顿比较常见的原因有cell的层级过多.cell中有触发离屏渲染的代码(譬如:cornerRadius.maskToBounds 同时使用).像素是否对齐.是否使用UITab ...
- java中PriorityQueue优先级队列使用方法
优先级队列是不同于先进先出队列的另一种队列.每次从队列中取出的是具有最高优先权的元素. PriorityQueue是从JDK1.5开始提供的新的数据结构接口. 如果不提供Comparator的话,优先 ...
- SQL server2012怎么备份数据库（设置自动备份）
1.打开SQL server配置管理器,设置sql server服务里的SQL server代理服务为自动并启动 2.启动Master Data Services Configuration Mana ...
- 构建Logstash+tomcat镜像（让logstash收集tomcat日志）
1.首先pull logstash镜像作为父镜像(logstash的Dockerfile在最下面): 2.构建my-logstash镜像,使其在docker镜像实例化时,可以使用自定义的logstas ...
- Unity3D 系统宏
Platform Defines The platform defines that Unity supports for your scripts are: Property: Functi ...
- [CC]Plugin-提取ISS3D关键点
基于CloudCompare开发的提取ISS3D关键点. void qLxPluginPCL::doISS3D() { assert(m_app); if (!m_app) return; const ...
- 【转】Ubuntu网卡配置
一.网卡地址配置Ubuntu的网络配置文件是:/etc/network/interfaces1.以DHCP 方式配置网卡 auto eth0 iface eth0 inet dhcp用sudo ...
- CPlus播放多媒体之播放声音
1.头文件需要<mmsystem.h>,但是之前需要包含<windows.h> 2.预处理#pragma comment<lib,"winmm.h"& ...