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 分页事件的更多相关文章

  1. jquery easyui datagrid 分页 详解

    前些天用jquery easyui的table easyui-datagrid做分页显示的时候,折腾了很久,后来终于解决了.其实不难,最主要我不是很熟悉前端的东西. table easyui-data ...

  2. jquery easyui datagrid 分页详解

    由于项目原因,用了jquery easyui 感觉界面不错,皮肤样式少点,可是官网最近打不开了,资料比较少,给的demo没有想要的效果,今天在用datagrid 做分页显示的时候,折腾了半天,网上的资 ...

  3. jquery easyui datagrid 分页 详解(java)

    1.首先引入easyui包,可以在官方网站下载,http://www.jeasyui.com/download/index.php <link rel="stylesheet" ...

  4. jquery easyui datagrid 分页实现---善良公社项目

    接着上篇文章,接下来给大家分享分页的实现,分页其实多多少少见过很有几种,框架中带的图片都特别的好看,会给用户以好的使用效果,具体实现,需要自己来补充代码: 图示1: 通常情况下页面数据的分页显示分成真 ...

  5. jquery easyui datagrid 分页实现

    通常情况下页面数据的分页显示分成真假两种.真分页是依靠后台查询时控制调出数据的数量来实现分页,也就是说页面在后台对数据进行处理,仅传输当前需要页的数据到前台来显示.而假分页则是后台一次性将所有的数据一 ...

  6. 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% ...

  7. 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  8. 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  9. jquery easyui datagrid使用参考

    jquery easyui datagrid使用参考   创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...

随机推荐

  1. JS中this的值到底为何?

    之前很久的时间,因为研究不深,对于this的值一直模模糊糊,不是很清楚,最近有空做了一些研究,终于彻底弄明白了this到底为何物. 首先, 先抛出一个定论:”在Javascript中,this关键字永 ...

  2. Javascript 自动计算生日

    首先调用方法需要注意 //inner_page为外围大层,确保时间可以实时修改  $(".inner_page").mouseover(function() {        va ...

  3. JSP-JSTL学习

    <%@page import="com.Student"%> <%@page import="com.Person"%> <%@p ...

  4. 关于一个通俗易懂的FFT的C语言实现教程

    找到一个通俗易懂并且神奇并且有趣的FFT算法C语言实现教程:http://www.katjaas.nl/FFTimplement/FFTimplement.html 只要对矩阵比较熟悉就能在教程的辅助 ...

  5. Arduino101/Genuino101的安装入门

    1.首先下载Arduino IDE                      下载地址:http://pan.baidu.com/s/1gewqV2j 选择arduino-1.6.8-windows. ...

  6. IplImage结构体

    一.IplImage的一些重要成员: 1.origin:图像原点的定义.=0,则图片的左上角是原点:=1,则左下角是原点.                                  IplIm ...

  7. ios 多种传值方式

    在网上看了看传值方法,没有找到完整的.在这把自己看到的几种传值方法写写吧. 1 . 属性传值 2 . 通知传值 3 . 代理传值 4 . block传值 5 . 单列传值 6 . ShareAppli ...

  8. android 获取包信息

    private static int testPackageInfo(Context context){ int localVersionCode = 9999; try { PackageInfo ...

  9. 模拟ajax的同异步

    今天突然想到那只在app中,如果请求数据时用的是app提供的接口,如果该接口没有同异步的话,怎么办. 所以就捣腾了下. 模拟ajax同异步. var VshopDataApi = { queryArr ...

  10. cat /proc/devices 和ls /dev

    对于新手来讲,linux的框架实在是太庞大,况且很多知识点需自己做才能理解 设备 文件 ,设备编号  #ll  -a /dev  在每一行都可以看到设备文件.设备编号(主.次) 对于每种硬件设备,系统 ...