JQuery easyui Datagrid 分页事件
easyui是Jquery中的一个轻量级UI插件,提供了一些诸如window、datagrid、button等控件。现在主要说说Datagrid中分页控件的使用。
easyui中可以单独添加分页pagination控件,也可以在datagrid中添加paginatio控件。
如在datagrid中添加分页控件:
view plaincopy to clipboardprint? $('#tt').datagrid({ title:'Load Data', iconCls:'icon-save', width:600, height:250, url:'/demo3/data/getItems' , columns:[[ {field:'itemid',title:'Item ID',width:80}, {field:'productid',title:'Product ID',width:80}, {field:'listprice',title:'List Price',width:80,align:'right'}, {field:'unitcost',title:'Unit Cost',width:80,align:'right'}, {field:'attr1',title:'Attribute',width:100}, {field:'status',title:'Status',width:60} ]], pagination:true //这里添加分页控件 }); $('#tt').datagrid({ title:'Load Data', iconCls:'icon-save', width:600, height:250, url:'/demo3/data/getItems' , columns:[[ {field:'itemid',title:'Item ID',width:80}, {field:'productid',title:'Product ID',width:80}, {field:'listprice',title:'List Price',width:80,align:'right'}, {field:'unitcost',title:'Unit Cost',width:80,align:'right'}, {field:'attr1',title:'Attribute',width:100}, {field:'status',title:'Status',width:60} ]], pagination:true //这里添加分页控件 });
可以扑捉分页的触发事件,方法如下:
view plaincopy to clipboardprint? var pg = $("#tt").datagrid("getPager"); if(pg) { $(pg).pagination({ onBeforeRefresh:function(){ alert('before refresh'); }, onRefresh:function(pageNumber,pageSize){ alert(pageNumber); alert(pageSize); }, onChangePageSize:function(){ alert('pagesize changed'); }, onSelectPage:function(pageNumber,pageSize){ alert(pageNumber); alert(pageSize); } }); } var pg = $("#tt").datagrid("getPager"); if(pg) { $(pg).pagination({ onBeforeRefresh:function(){ alert('before refresh'); }, onRefresh:function(pageNumber,pageSize){ alert(pageNumber); alert(pageSize); }, onChangePageSize:function(){ alert('pagesize changed'); }, onSelectPage:function(pageNumber,pageSize){ alert(pageNumber); alert(pageSize); } }); }
在触发onChangePageSize事件时,会同时触发onSelectPage事件。onSelectPage事件会传递2个参数pageNumber、pageSize.
pageSize是页大小,pageNumber为下一次显示的页号,默认从第一页开始。
JQuery easyui Datagrid 分页事件的更多相关文章
- jquery easyui datagrid 分页 详解
前些天用jquery easyui的table easyui-datagrid做分页显示的时候,折腾了很久,后来终于解决了.其实不难,最主要我不是很熟悉前端的东西. table easyui-data ...
- jquery easyui datagrid 分页详解
由于项目原因,用了jquery easyui 感觉界面不错,皮肤样式少点,可是官网最近打不开了,资料比较少,给的demo没有想要的效果,今天在用datagrid 做分页显示的时候,折腾了半天,网上的资 ...
- jquery easyui datagrid 分页 详解(java)
1.首先引入easyui包,可以在官方网站下载,http://www.jeasyui.com/download/index.php <link rel="stylesheet" ...
- jquery easyui datagrid 分页实现---善良公社项目
接着上篇文章,接下来给大家分享分页的实现,分页其实多多少少见过很有几种,框架中带的图片都特别的好看,会给用户以好的使用效果,具体实现,需要自己来补充代码: 图示1: 通常情况下页面数据的分页显示分成真 ...
- jquery easyui datagrid 分页实现
通常情况下页面数据的分页显示分成真假两种.真分页是依靠后台查询时控制调出数据的数量来实现分页,也就是说页面在后台对数据进行处理,仅传输当前需要页的数据到前台来显示.而假分页则是后台一次性将所有的数据一 ...
- jQuery EasyUI datagrid实现本地分页的方法
http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1% ...
- 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
- 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
- jquery easyui datagrid使用参考
jquery easyui datagrid使用参考 创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...
随机推荐
- JS中this的值到底为何?
之前很久的时间,因为研究不深,对于this的值一直模模糊糊,不是很清楚,最近有空做了一些研究,终于彻底弄明白了this到底为何物. 首先, 先抛出一个定论:”在Javascript中,this关键字永 ...
- Javascript 自动计算生日
首先调用方法需要注意 //inner_page为外围大层,确保时间可以实时修改 $(".inner_page").mouseover(function() { va ...
- JSP-JSTL学习
<%@page import="com.Student"%> <%@page import="com.Person"%> <%@p ...
- 关于一个通俗易懂的FFT的C语言实现教程
找到一个通俗易懂并且神奇并且有趣的FFT算法C语言实现教程:http://www.katjaas.nl/FFTimplement/FFTimplement.html 只要对矩阵比较熟悉就能在教程的辅助 ...
- Arduino101/Genuino101的安装入门
1.首先下载Arduino IDE 下载地址:http://pan.baidu.com/s/1gewqV2j 选择arduino-1.6.8-windows. ...
- IplImage结构体
一.IplImage的一些重要成员: 1.origin:图像原点的定义.=0,则图片的左上角是原点:=1,则左下角是原点. IplIm ...
- ios 多种传值方式
在网上看了看传值方法,没有找到完整的.在这把自己看到的几种传值方法写写吧. 1 . 属性传值 2 . 通知传值 3 . 代理传值 4 . block传值 5 . 单列传值 6 . ShareAppli ...
- android 获取包信息
private static int testPackageInfo(Context context){ int localVersionCode = 9999; try { PackageInfo ...
- 模拟ajax的同异步
今天突然想到那只在app中,如果请求数据时用的是app提供的接口,如果该接口没有同异步的话,怎么办. 所以就捣腾了下. 模拟ajax同异步. var VshopDataApi = { queryArr ...
- cat /proc/devices 和ls /dev
对于新手来讲,linux的框架实在是太庞大,况且很多知识点需自己做才能理解 设备 文件 ,设备编号 #ll -a /dev 在每一行都可以看到设备文件.设备编号(主.次) 对于每种硬件设备,系统 ...