如何使用jquery easyui进行分页

JavaScript 前端客 5936℃ 0评论

平时写程序实现分页是比较麻烦的,当我们使用jquery easyui 前端控件,分页工作就会变的轻松一些,如果你想使前端分页的工作轻松一些,就跟随我来一起学习jquery easyui 分页的使用方法吧。
在web开发中,经常会遇到分页的需求,如果靠我们手写代码,可能代码又多 ,样式又不好看,下面介绍一下jQuery easyUI 分页功能,非常的方便简单。如图:

1
示例代码:

 <div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>

按照《jQuery EasyUI框架使用文档》包含必要文件后,只要在$(function(){ }); 里插入下面的代码即可:

 $('#pp').pagination(options);

下面来介绍Pagination的具体用法,首先来看属性:

属性名 类型 描述 默认值
total 数字 当分页建立时设置记录的总数量 1
pageSize 数字 每一页显示的数量 10
pageNumber 数字 当分页建立时,显示的页数 1
pageList 数组 用户可以修改每一页的大小, pageList 属性定义了多少种大小可以改变. [10,20,30,50]
loading 布尔 定义数据是否正在加载 false
buttons 数组 定义自定义按钮,每个按钮包含两个

属性:

iconCls: 显示背景图像的 CSS 类

handler: 当一个按钮被点击时的处理函数

null
showPageList 布尔 定义是否显示页面列表 true
showRefresh 布尔 定义是否显示刷新按钮 true
beforePageText 字符串 在输入框组件前显示的标签 Page
afterPageText 字符串 在输入框组件后显示的标签 of {pages}
displayMsg 字符串 显示一个页面的信息。 Displaying {from} to {to} of {total} items

事件

事件名 参数 描述
onSelectPage pageNumber, pageSize 当用户选择一个新页时触发,回调函数包含

两个参数:

pageNumber: 新页面的页数 pageSize: 新页面的大小

onBeforeRefresh pageNumber, pageSize 刷新按钮被点击之前触发,如果返回 false 则

取消刷新操作

onRefresh pageNumber, pageSize 刷新以后触发
onChangePageSize  pageSize 当改变页面大小时触发

1.数据的提取和显示

DataGrid是通过url属性获取数据的。例如:url:’ListInfo.action',这样通过调用Action中的方法获取数据,返回的是JSON字串。注意,JSON字串必须按照DataGrid定义的数据格式进行拼装。特别强调的是,JSON字串中的total域的值是数据的条数,用于数据的分页。

2.数据的分页

数据的分页分为前台分页和后台分页,前台分页DataGrid已经封装好了。DataGrid定义了两个参数: rows(每页的条数),page(当前的页数),这两个参数分别对应属性pageSize,pageNumber。用户可以在pageSize,pageNumber属性中设置,也可以不设置,这样就取默认值。我们只需在Action中定义两个变量,private int rows; private int page; 接着通过SQL语句获取需要取的值。分页的SQL语句(Oracle)如下:

select * from(    
select rownum r,  field1,field2 from table_name where rownum <= page* rows(  )      where r > (page-1) * rows   

这样提取的数据的条数赋值给total域,拼装在JSON字串中返回,就可以实现分页了。当然,pagination:true,是当然需要的。

3.数据的操作

数据的操作大致可分为:查看,删除。对于查看,我们可以通过onClickRow或onDblClickRow事件实现。如:

$(function(){
   $('#test').datagrid({
    title:'数据列表',
    width:900,
    height:500,

        .......(省略的属性)

    onDblClickRow: function() {
    var selected = $('#test').datagrid('getSelected');
    if (selected){
      window.open("DataView.action?Id="+selected.ID);
   }}

这样双击就可以查看了。

关于删除,可以通过点击删除按钮,调用删除方法来实现。删除按钮可以在拼装JSON字串的时候,赋值给OPERATION域,这样设置{field:'OPERATION',title:'操作',width:120},就可以在页面上显示删除按钮了。删除的实现,如下:

function DelAff(){
   $.messager.confirm('确认','是否真的删除?',function(r){ 
   if (r){ 
   var selected = $('#test').datagrid('getSelected');
   if (selected){
      var index = $('#test').datagrid('getRowIndex', selected);
      $('#test').datagrid('deleteRow', index);
    DeleteSubmit(selected);
   }
   }
   });
  }
  function DeleteSubmit(selected)
  {
       var url="DataDelete.action?Id="+selected.ID;
       $.post(
       url     
     );
  }

这样页面的删除和数据库中的删除都实现了。

4.转载说明

其实你应该发现了,这篇文章到处都有,那我为啥要转载呢,你如果读到这里会发现,我网上的各种转载简直惨不忍睹,要么没图片,要么没代码,混乱不堪。其实,上面的代码也难免有错误,我没认真去看,仅仅在格式上整理的更容易阅读些。至于easyui datagrid的分页,还是建议多看看easyui官网的实例,非常容易理解,由浅入深,学起来也就没那么困难了。

附:
1、easyui 文档 http://www.jeasyui.com/documentation/index.php
2、easyui 文档 中文版 http://www.zi-han.net/case/easyui/datagrid&tree.html#datagrid
3、easyui 文档中文版 下载 http://www.veryhuo.com/down/html/71672.html
4、easyui 分页 demo演示 http://www.jeasyui.com/demo/main/index.php?plugin=Pagination&theme=default&dir=ltr&pitem=

版权所有,转载请注明:前端客 » 如何使用jquery easyui进行分页
喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)