jQuery EasyUI插件使用之datagrid的分页功能使用备忘

官网: 
http://www.jeasyui.com/index.php

对照这官网提供的demo以及api文档,慢慢摸索学习
首先是其中的datagrid插件,其中的分页功能

客户端相关属性配置:
pagination     boolean 默认false  显示一个分页工具栏: true/false
pagePosition  string  默认bottom 分页工具栏的位置:  ‘top‘,‘bottom‘,‘both‘ (下图就是在底部)
pageNumber  number  默认1      页码:第1页、第2页(直观一点就是下图中,第二个红色框起来的页码)
pageSize         number  默认10     每页的记录数 (下图第一个红色框起来的每页记录数)
pageList          array   默认[10,20,30,40,50] 提供给用户可选择的每页显示记录数 (下图中第三个红色框起来的下拉列表)

服务器端:
1、接收参数
page 接受客户端的页码,对应的就是用户选择或输入的pageNumber(按照上图的例子,用户点了下一页,传到服务器端就是2)
rows 接受客户端的每页记录数,对应的就是pageSize  (用户在下拉列表选择每页显示30条记录,传到服务器就是30)

php后台的代码参考(我也是不知道哪里copy来的):

点击(此处)折叠或打开

  1. $page = isset($_POST[‘page‘]) ? intval($_POST[‘page‘]) : 1;
  2. $rows = isset($_POST[‘rows‘]) ? intval($_POST[‘rows‘]) : 20;

如果数据库是mysql,计算一个偏移量:

点击(此处)折叠或打开

  1. $offset = ($page - 1 ) * $rows;

而sql语句最终是这样子的:

点击(此处)折叠或打开

  1. select * from TAB where xxx limit $offset, $rows

假设用户选择每页显示30条记录(rows)、要看第8页(page)
最后计算出偏移量= (8-1)*30=210

点击(此处)折叠或打开

  1. select * from TAB where xxx limit 210,30

2、返回json
total: 总的记录条数
rows:  本页的记录

其中rows就是刚才sql语句返回的记录
total是本次查询总的记录数(不止是本页)

点击(此处)折叠或打开

  1. select count(*) from TAB where xxx

最终返回客户端的可能是这个样子:

点击(此处)折叠或打开

  1. {
  2. total: 1235,
  3. rows: [
  4. {id:332343, name:‘xxxxxx‘},
  5. {id:342342, name:‘yyyyyy‘},
  6. ......
  7. ]
  8. }
时间: 2024-08-12 16:07:36

jQuery EasyUI插件使用之datagrid的分页功能使用备忘的相关文章

jQuery EasyUI - 数据表格(DataGrid)

由于工作需要,项目使用前端 jQuery EasyUI - DataGrid 来控制数据表格. 1.加载相关js和css,因为easyui依赖jquery,所有加载easyui前要先加载jquery,否则为提示找不到datagrid <!-- 加载jquery --> <script type="text/javascript" src="plugins/jquery/jquery-1.4.2.min.js"></script>

Jquery EasyUI插件

属性 属性是定义在 jQuery.fn.{plugin}.defaults.比如,dialog 的属性是定义在 jQuery.fn.dialog.defaults. 事件 事件(回调函数)也是定义在 jQuery.fn.{plugin}.defaults. 方法 调用方法的语法:$('selector').plugin('method', parameter); 其中: selector 是 jquery 对象选择器. plugin 是插件名称. method 是与插件相匹配的已存在方法. pa

jquery easyui 1.3.4 datagrid pageNumber 設置導致兩次請求的解决方案

$('#table').datagrid({ url: '/get/data/path/to/your/server', pageNumber: 2, pageSize: 10, ... }); 當手動設置 pageNumber >= 2 時,查看網络請求會有兩次,並且第二次的請求的 pageNumber == 1: 二.原因: jquery.easyui.min.js 1.3.4 的 7821-7828 行代碼: 因为分頁控件初始化参數 total == 0, pageNumber == 1,

为JQuery EasyUI 表单组件增加“焦点切换”功能

1.背景说明 在使用 JQuery  EasyUI 各表单组件时,实际客户端页面元素是由 JQuery EasyUI 生成的,元素的焦点切换,虽然 Tab 键可以正常用,但顺序控制属性 tabindex 不起作用,因为页面看到的元素,是生成的,没有tabindex 属性,而真实的元素被隐藏了.本文通过一个自定义函数,实现Tab 和 回车键的焦点切换功能. 2.函数定义 通过捕获窗口按件,对回车和Tab键进行了热点切换处理.先根据当前焦点,获取需要tabindex 属性,加1后为下一焦点无素的属性

[转载]EasyUI中数据表格DataGrid添加排序功能

我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前页的数据进行排序,不是我们想要用效果. 下面开始演示从服务器端排序功能. 第一步,启用EasyUI DataGrid的排序功能: 具体就是为列设置sortable属性,如下: { field: "SOID", title: "订单单号", width: "80

jQuery EasyUI 为Combo,Combobox添加清除值功能

效果图: 图标 (function($){          //初始化清除按钮     function initClear(target){         var jq = $(target);         var opts = jq.data('combo').options;         var combo = jq.data('combo').combo;         var arrow = combo.find('span.combo-arrow');         

jQuery EasyUI教程之datagrid应用(一)

一.利用jQuery EasyUI的DataGrid创建CRUD应用 对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录.本教程将教会你如何运用jQuery EasyUI框架来实现DataGrid的CRUD功能 . 我们会用到如下插件: · datagrid: 列表显示数据. · dialog: 增加或编辑单个用户信息. · form: 用来提交表单数据. · messager: 用来显示操作信息. 第一步:准备数据库 使

jQuery EasyUI教程之datagrid应用(三)

今天继续之前的整理,上篇整理了datagrid的数据显示及其分页功能 获取数据库数据显示在datagrid中:jQuery EasyUI教程之datagrid应用(一) datagrid实现分页功能:jQuery EasyUI教程之datagrid应用(二) 接下来就是数据的增删改查了,首先我们在页面中添加功能按钮 这里很简单就是datagrid的toolbar属性 接下来我们实现按键的功能 查询比较麻烦我们最后写,先写添加吧,既然要添加,就应该有表格或是输入的文本框吧,还要进行提交,那就要有f

jQuery EasyUI教程之datagrid应用(二)

上次写到了让数据库数据在网页datagrid显示,我们只是单纯的实现了显示,仔细看的话显示的信息并没有达到我们理想的效果,这里我们丰富一下: 上次显示的结果是这样的 点击查看上篇:jQuery EasyUI教程之datagrid应用(一) 这里不难发现生日的格式是毫秒(long型数据),并不是我们想要的年月日的格式,那我们就修改一下 我们在js中写入格式时间的方法,并在生日一列用formatter来调用方法格式时间, //格式化时间 //把long型日期转为想要类型 function getDa