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.分 ...
随机推荐
- 安装XDEBUG步骤及问题
echo PHPINFO(); 如果搜索中没找到XDEBUG, 则表示没安装XDEBUG; XDEBUG官方下载路径, https://xdebug.org/download.php 查看环境参数 我 ...
- Yii源码阅读笔记（二十六）
Application 类中设置路径的方法和调用ServiceLocator(服务定位器)加载运行时的组件的方法注释: /** * Handles the specified request. * 处 ...
- Linux系统下安装MongoDB 指南
1.首先连接到Linux系统. 2.到MongoDB官网下载合适的MongoDB安装压缩包. 下载页面:https://www.mongodb.org/downloads#production. 这里 ...
- SPARK支持的常见文件格式
SequenceFile读写文件Scala\java类型对应表
- LeetCode Verify Preorder Serialization of a Binary Tree
原题链接在这里:https://leetcode.com/problems/verify-preorder-serialization-of-a-binary-tree/ 题目: One way to ...
- Python开发【第七章】：Python面向对象进阶
1.静态方法 通过@staticmethod装饰器即可把其装饰的方法变为一个静态方法,什么是静态方法呢?其实不难理解,普通的方法,可以在实例化后直接调用,并且在方法里可以通过self.调用实例变量或类 ...
- Progressive Scanning (逐行扫描) vs Interlaced Scanning (隔行扫描)
source: http://sh.sina.com.cn/20041207/231443445.shtml 逐行扫描每一帧图像均是由电子束顺序地一行接着一行连续扫描而成.要得到稳定的逐行扫描图像,每 ...
- JAVA NIO系列（四） 选择器
前面介绍过Channel.Buffer,后面的文章主要讲解Selector的实践以及实现原理,选择器的概念比起通道.缓冲区要复杂一些,并且选择器是NIO中最重要的一部分内容. 为什么使用Selecto ...
- Latex 分段函数
Latex里面分段函数的输入: \begin{equation} P_{r-j}= \begin{cases} 0&\mbox{if $r-j$ is odd}\\ ...
- Hosts简单说明
Hosts是一个没有扩展名的系统文件,可以用记事本等工具打开,其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联"数据库",当用户在浏览器中输入一个需要登录的网址时,系统 ...