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.分 ...
随机推荐
- 浏览器中Javascript单线程分析
线程这个特性对于一门语言环境来说是尤其重要的,在Java/C++环境下都提供了多线程API操作. 但在Javascript中据说代码执行时单线程的,大量计算的逻辑会阻塞浏览器HTML渲染,但setTi ...
- C/C++面试
1. RTTL 运行时类别识别,在只有一个指向基类的指针或引用时确定一个对象的准确类型. 2.什么是拷贝构造函数 是单个形参的构造函数,实参是与该类同属一类的对象:在类定义中,如果未提供自己的拷贝构造 ...
- jQuery ajax 返回的数据类型
请求数据的接口信息如下 当我们打印出返回的数据与数据节点时,我们发现数据节点显示为undefind 查看一下我们的代码 $.ajax({ type: "Post", url: &q ...
- 协程并发框架gevent及其用法
gevent是python的一个并发框架,采用协程实现并发目的,用起来也非常简单 gevent的docs:http://www.gevent.org/contents.html 一个最简单的例子: i ...
- Python开发【程序】：计算器
开发一个简单的python计算器 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568 ...
- centos7 yum安装mysql5.7并在root密码忘记的情况下重设密码
CentOS7的yum源中默认好像是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1. 下载mysql的repo源 1 $ wget http://repo.mysql ...
- JSON风格指南-真经
简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语 ...
- Unity NGUI 资源下载
https://www.assetstore.unity3d.com/cn/#!/content/2413 版本: 3.9.1 下载地址 密码:amtz
- 前端开发--css属性书写顺序
css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; ...
- 关于学习Knockoutjs--入门（一）
前段时间做项目一直在用knockout,虽然用着不怎么利索,但是知识是一点一点探索的. 首先介绍一下 Knockout是什么? 他是一个很优秀的js库,他最大的功能就是实现双向绑定,它可以帮助你仅使用 ...