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. vue2.0之echarts使用

    1.首先下载echart依赖 npm install echarts --save备注:npm 安装报错时使用cnpm 2.全局注册 在main.js里引入echart并在vue中注册echart / ...

  2. markdownpad2-注册码-2017-02-23

    MarkdownPad2.5/2 注册码   User: Soar360@live.com 授权: GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImD ...

  3. STM32的FLASH ID加密

    #define FLASH_ID_OFFSET 30000    //任意定义一个数 //把地址直接减去或者加上一个数是不要程序中直接出现这个地址 volatile u32 Flash_ID_addr ...

  4. Installing Jenkins as a Windows service

    Install Jenkins as a Windows service NOTE: if you installed Jenkins using the windows installer, you ...

  5. Linux使用——Linux命令——Linux 系统基本命令使用记录

    查看系统版本信息 查看系统版本:cat /proc/version 查看cpu相关信息,包括型号.主频.内核信息:cat /proc/cpuinfo 快速了解CPU使用情况:free -h 解压文件 ...

  6. android 6 中init.rc的生成过程【转】

    本文转载自:https://blog.csdn.net/quhj/article/details/51819638 android 系统开机是会有一个初始化过程 init ,整个初始化过程是根据配置脚 ...

  7. loj#2510. 「AHOI / HNOI2018」道路 记忆化,dp

    题目链接 https://loj.ac/problem/2510 思路 f[i][a][b]表示到i时,公路个数a,铁路个数b 记忆化 复杂度=状态数=\(nlog^2n\) 代码 #include ...

  8. vue项目从引入vue.js 改为使用vue-cil (webpack)时修改的一些内容

    在元素属性中不要写js关键字,会报使用关键字的错如@click='if(){}else{}', if-else 语句可以使用三元表达式或短路运算符来实现 v-for 不写:key  会有警告 ,使用: ...

  9. OAuth的MVC实现(微软)

    LoginController中: 第三方登陆 public ActionResult LogOn() { string liveUrl = string.Format( "https:// ...

  10. sublime text 中文显示异常

    本文链接:sublime text 中文显示异常 http://www.cnblogs.com/daysme/p/7549857.html 前言 sublime text 3143 用了一年时候,最近 ...