jQuery EasyUI 数据网格 - 添加分页组件

  本实例演示如何从服务器端加载数据,如何添加分页组件(pagination)到数据网格(datagrid)。

  创建数据网格(DataGrid)

  为了从远程服务器端加载数据,您应该设置 'url' 属性,在您的服务器端应该返回 JSON 格式数据。请看数据网格(datagrid)文档得到更多关于它的数据格式信息。

  

  url="datagrid2_getdata.php"

  title="Load Data" iconCls="icon-save"

  rownumbers="true" pagination="true">

  

  

  

  

  

  

  

  

  

  

  

Item ID Product ID List Price Unit Cost Attribute Stauts

  我们定义数据网格(datagrid)列,并设置 'pagination' 属性为 true,它将在数据网格(datagrid)的底部生成一个分页(pagination)工具栏。pagination将发送两个参数到服务器:

  page:页码,起始值 1。

  rows:每页显示行。

  服务器端代码

  $page = isset($_POST['page']) ? intval($_POST['page']) : 1;

  $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;

  // ...

  $rs = mysql_query("select count(*) from item");

  $row = mysql_fetch_row($rs);

  $result["total"] = $row[0];

  $rs = mysql_query("select * from item limit $offset,$rows");

  $items = array();

  while($row = mysql_fetch_object($rs)){

  array_push($items, $row);

  }

  $result["rows"] = $items;

  echo json_encode($result);

  下载 jQuery EasyUI 实例

  jeasyui-datagrid-datagrid2.zip

  本文转载自:w3cschool(编辑:雷林鹏 来源:网络 侵删)

雷林鹏分享:jQuery EasyUI 数据网格 - 添加分页组件的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 数据网格 - 添加复选框

    jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...

  2. 雷林鹏分享:jQuery EasyUI 数据网格 - 添加查询功能

    jQuery EasyUI 数据网格 - 添加查询功能 本实例演示如何从数据库得到数据,并将它们显示在数据网格(datagrid)中.然后演示如何根据用户输入的搜索关键词搜寻显示结果. 创建数据网格( ...

  3. 雷林鹏分享:jQuery EasyUI 数据网格 - 自定义分页

    jQuery EasyUI 数据网格 - 自定义分页 数据网格(datagrid)内置一个很好特性的分页功能,自定义也相当简单.在本教程中,我们将创建一个数据网格(datagrid),并在分页工具栏上 ...

  4. 雷林鹏分享:jQuery EasyUI 数据网格 - 启用行内编辑

    jQuery EasyUI 数据网格 - 启用行内编辑 可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...

  5. 雷林鹏分享:jQuery EasyUI 数据网格 - 扩展编辑器

    jQuery EasyUI 数据网格 - 扩展编辑器 一些常见的编辑器(editor)添加到数据网格(datagrid),以便用户编辑数据. 所有的编辑器(editor)都定义在 $.fn.datag ...

  6. 雷林鹏分享:jQuery EasyUI 数据网格 - 设置冻结列

    jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...

  7. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建复杂工具栏

    jQuery EasyUI 数据网格 - 创建复杂工具栏 数据网格(datagrid)的工具栏(toolbar)可以包含按钮及其他组件. 您可以通个一个已存在的 DIV 标签来简单地定义工具栏布局,该 ...

  8. 雷林鹏分享:jQuery EasyUI 数据网格 - 动态改变列

    jQuery EasyUI 数据网格 - 动态改变列 数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用dat ...

  9. 雷林鹏分享:jQuery EasyUI 数据网格 - 格式化列

    jQuery EasyUI 数据网格 - 格式化列 以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式 ...

随机推荐

  1. log4j2使用介绍

    工作中,用到了log4j2,以前只接触过log4j,也没有太过深入,这次就稍微系统的学习了以下log4j2. 一.引入pom.xml 使用maven作为项目的构建环境,pom.xml使用slf4j,s ...

  2. 3545: [ONTAK2010]Peaks 平衡树,最小生成树

    链接 https://www.lydsy.com/JudgeOnline/problem.php?id=3545 离线询问,按照权值排个序 就是在克鲁斯卡尔时候维护个treap,到时候挨个查询一下就好 ...

  3. SpringBoot 使用validation数据校验

    后端对数据进行验证 添加包 hibernate-validator <!-- https://mvnrepository.com/artifact/org.hibernate.validator ...

  4. UVALive 7512 November 11th 题解

    思路:心态大崩,最多不讲了,最少应该是三个一组,比如......应该是.S..S.,这样占的最多 代码: #include<set> #include<map> #includ ...

  5. ProgrammingError: You must not use 8-bit bytestrings...

    问题出现: You must not use 8-bit bytestrings unless you use a text_factory that can interpret 8-bit byte ...

  6. (转)Awesome Knowledge Distillation

    Awesome Knowledge Distillation 2018-07-19 10:38:40  Reference:https://github.com/dkozlov/awesome-kno ...

  7. Java基础 【类之间的关系】

    在Java与其他面向对象设计语言中,类之间常见的关系有6种 分别是:  依赖.关联.聚合.组合.继承.实现,他们的耦合度依次增强. 其中,关联.聚合.组合关系仅仅是在语义上有所区别,所谓语义就是指上下 ...

  8. Derek解读Bytom源码-protobuf生成比原核心代码

    作者:Derek 简介 Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom ...

  9. java web项目在linux部署、启动,查看系统配置常用的linux命令总结

    本文为博主原创,未经允许不得转载: 以下为在工作中常用的linux命令进行了总结,主要在项目安装及启动,及编辑部署文件时应用较多1.gz文件是一种压缩文件. 以·tar.gz为扩展名的是一种压缩文件, ...

  10. module.exports 与 exports

    module.exports 与 exports 注意:1 对于要导出的属性,可以简单直接挂到 exports 对象上2 对于类,为了直接使导出的内容作为类的构造器可以让调用者使用 new 操作符创建 ...