支付宝赞助帐号:service@kuitao8.com 

jquery easyui 分页的使用方法

Created2013-06-11   Views 5599    Author 懒人程序

  在web开发中,经常会遇到分页的需求,如果靠我们手写代码,可能代码又多 ,样式又不好看,下面介绍一下jQuery easyUI 分页功能,非常的方便简单

  然后按照《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)如下:

  这样提取的数据的条数赋值给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.待解决的问题

  如果返回的数据为空,则在IE浏览器下,页面会有Bug。我的解决办法是,把每个域设为"",这样在页面上就会出现一行空内容的数据。如果遇到这个问题并解决的朋友,可以给我建议。

上一篇: 遍历jquery对象的代码分享
下一篇: 基于jquery封装的一个js分页
支持键盘 ← →

邮件订阅

订阅我们的精彩内容