EasyUI Datagrid 分页显示(客户端)
转自:https://blog.csdn.net/metal1/article/details/17536185
EasyUI Datagrid 分页显示(客户端)
By ZYZ
在使用JQuery EasyUI 的Datagrid 控件时,其中的pagination(分页控件)非常有用,该分页控件允许用户导航页面的数据,它支持页面导航和页面长度选择的选项设置。
Pagination控件上的显示文字默认是英文的,在引用了中文翻译文件(easyui-lang-zh_CN.js)可以全部显示为中文。如下:
<scripttype="text/javascript" src="../../js/easyui-lang-zh_CN.js"></script>
首先初始化datagrid
如果要达到正常的分页效果,需要在初始化函数内对datagrid的分页方法进行设置。
$(function(){
$('# table').datagrid({loadFilter:pagerFilter});
});
设置datagrid获取数据的来源:
在这里分别以get和post方法来获取数据。
functionSearchTrainee() {
//获取搜索条件
var companyCode =$('#hiddenCompanyCode').val();
var name = $('#txtName').val();
var planName =$('#textSearchPlan').val();
if (companyCode == "")companyCode = "000";
var rowsData = "[]";
//get方法:
varhandler = "Ajax/GetTraineeHandler.ashx?Name=" + name +"&PlanName=" + planName + "&CompanyCode=" +companyCode;
$('#tableTrainee').datagrid('options').url = encodeURI(handler);
$('#tableTrainee').datagrid('reload');
//post方法:
$.post('Ajax/GetTraineeHandler.ashx', {
Name: name,
PlanName: planName,
CompanyCode: companyCode
}, function (data) {
$('#tableTrainee').datagrid('loadData', JSON.parse(data));
});
}
Post方法中的JSON.parse 函数很重要,它将post得到的字符串转换成了object类,因为过滤函数中需要使用object类的参数。
设置页面过滤函数
function pagerFilter(data)
{
var dg = ('#table').datagrid();;
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
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;
}
一般获取Data数据时会采用一次获取全部数据,这种方法的确很方便省事。一次获取数据数据保存在浏览器中,翻页和改变行数的动作会非常的快速。
但是如果获取的数据量非常庞大,比如一百万行数据时怎么办呢?一次全部获取的话会严重影响Datagrid的加载速度,也加重了数据库服务器的工作负担,如果遇到并发用户非常多的情况,那就更加慢了。
EasyUI Datagrid 分页显示(客户端)的更多相关文章
- EasyUI DataGrid分页数据绑定
记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...
- EasyUI datagrid 分页Json字符串格式
//EasyUI datagrid 分页Json字符串格式 //{"total":xx,"rows":[{...},{...}]} total:总数 rows: ...
- asp.net mvc easyui datagrid分页
提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分 ...
- easyUI datagrid 分页参数page和rows
Struts2获取easyUI datagrid 分页参数page和rows 用pageHelper分页时,只要是能够获取前台传来的两个参数page和rows基本就完成了很大一部分. 获取方法:定义两 ...
- easyui datagrid 分页略解
easyui datagrid 本身自带了分页功能. 但是这个需要你自己控制. 在后台可以得到两个datagrid的参数,rows 和page.其中rows是每页要显示的个数,page是第几页.单纯的 ...
- jquery easyui datagrid 分页详解
由于项目原因,用了jquery easyui 感觉界面不错,皮肤样式少点,可是官网最近打不开了,资料比较少,给的demo没有想要的效果,今天在用datagrid 做分页显示的时候,折腾了半天,网上的资 ...
- jquery easyui datagrid 分页 详解
前些天用jquery easyui的table easyui-datagrid做分页显示的时候,折腾了很久,后来终于解决了.其实不难,最主要我不是很熟悉前端的东西. table easyui-data ...
- easyui datagrid分页
datagrid分页设置 pagination="true" 貌似是不行的! 只是显示分页工具栏 没有达到分页效果 前端 $(function (){ var p = $('#d ...
- .Net Mvc EasyUI DataGrid 分页
由于项目的需要,最近一直在学习 .net MVC 和EasyUI.上周写了一个<.Net Mvc 返回Json,动态生成EasyUI Tree>,今天再写一个EasyUI中另一个重要的组件 ...
随机推荐
- Python安装配置
Python下载 官网下载地址:https://www.python.org/downloads/windows/ 下载安装包: python-3.5.0-amd64(64位).exe python- ...
- 洛谷 P2285 BZOJ 1207 [HNOI2004]打鼹鼠
题目描述 鼹鼠是一种很喜欢挖洞的动物,但每过一定的时间,它还是喜欢把头探出到地面上来透透气的.根据这个特点阿牛编写了一个打鼹鼠的游戏:在一个n*n的网格中,在某些时刻鼹鼠会在某一个网格探出头来透透气. ...
- abs 暴力
Given a number x, ask positive integer y≥2y≥2, that satisfy the following conditions: 1. The absolut ...
- UVA 129_ Krypton Factor
题意: 一个字符串含有两个相邻的重复的子串,则称这个串为容易的串,其他为困难的串,对于给定n,l,求出由前l个字符组成的字典序第n小的困难的串. 分析: 按字典序在字符串末尾增加新的字符,并从当前字符 ...
- [bzoj4827][Hnoi2017]礼物_FFT
礼物 bzoj-4827 Hnoi-2017 题目大意:给定两个长度为$n$的手环,第一个手环上的$n$个权值为$x_i$,第二个为$y_i$.现在我可以同时将所有的$x_i$同时加上自然数$c$.我 ...
- 苹果装WIN 7
一.准备:1.8G或以上的正版U盘或者移动硬盘,提前备份U盘数据(2013款air要求安装64位系统,市面上比较多U盘不是正版盘,一般做不成功,要换盘) 2.64位纯净版Windows7 ISO的下载 ...
- hbase definitive guide 笔记
ext3 file system 优化 ext3 在用在hbase上可以做如下优化: 1. mount的时候加上noatime选项.这可以减少管理开销 2. 用命令tune2fs -m 0 /dev/ ...
- 原想着mysql里放些文件什么的,查完资料还是算了
三种东西永远不要放到数据库里 1.图片,文件,二进制数据,文件还是放入文件服务器吧或者分布式文件系统 2.短生命期数据 3.日志文件 mysql中一张表的数据是全部在一个数据文件中的.如果大字段的数据 ...
- ppc_85xx-gcc -shared -fPIC liberr.c -o liberr.so
fPIC作用于编译阶段,告诉编译器产生与位置无关代码(Position-Independent Code), 则产生的代码中,没有绝对地址,所有使用相对地址.故而代码能够被载入器载入到内存的随意 ...
- vsftpd.conf案例
1. 匿名服务器的连接(独立的服务器) 在/etc/vsftpd/vsftpd.conf配置文件中添加如下几项:Anonymous_enable=yes (允许匿名登陆)Dirmessage_enab ...