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.代码如下: 页面上 ...
随机推荐
- php读取json时无数据(为空)的解决方法
在使用PHP调用一些json接口文件时 如果使用 file_get_contents 获取页面json数据后 再使用json_decode()解析后 数据无法正常输出 这是的返回值为null 这是由于 ...
- OGRE启动过程详解(OGRE HelloWorld程序原理解析)
本文介绍 OGRE 3D 1.9 程序的启动过程,即从程序启动到3D图形呈现,背后有哪些OGRE相关的代码被执行.会涉及的OGRE类包括: Root RenderSystem RenderWindow ...
- HttpClient方式模拟http请求
方式一:HttpClient import org.apache.commons.lang.exception.ExceptionUtils; import org.apache.http.*; im ...
- keras 入门之 regression
本实验分三步: 1. 建立数据集 2. 建立网络并训练 3. 可视化 import numpy as np from keras.models import Sequential from keras ...
- Entity Framework关联查询以及数据加载(延迟加载,预加载)
数据加载分为延迟加载和预加载 EF的关联实体加载有三种方式:Lazy Loading,Eager Loading,Explicit Loading,其中Lazy Loading和Explicit Lo ...
- 设置jdk的编码
在环境变量中: AVA_TOOL_OPTIONS-Dfile.encoding=utf-8 -Duser.language=en -Duser.country=US
- linux按键驱动之poll
上一节应用程序的死循环里的读函数是一直在读的:在实际的应用场所里,有没有那么一种情况,偶尔有数据.偶尔没有数据,答案当然是有的.-->poll机制:Poll机制实现的是一定时间如果没有按键的话就 ...
- Codeforces Round #361 Jul.6th A题 ☺译
A.迈克和手机 当迈克在沙滩上游泳的时候,他意外的把他的手机扔进了水里.不过你甭担心因为他立马买了个便宜些的代替品,这个代替品是老款九键键盘,这个键盘只有十个等大的数字按键,按以下方式排列: 1 2 ...
- NewQuant正式在Github发布
Github上的NewQuant https://github.com/xuruilong100/NewQuant NewQuant简介: NewQuant是一个小型开源C++库,可以解决数据分析.金 ...
- js中java式的类成员
function Range(from,to,x){ //实例(对象)字段 this.x=x; } //类字段 Range.Y="类字段"; //类方法 Range.s=funct ...