jQuery EasyUI datagrid实现本地分页的方法

84533871 2015-02-13

本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下：

一般分页都是后台做，前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。

这里重点用到了pagination的监听，以及JS数组的slice方法来完成。代码如下：

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"/> 
  <title></title> 
  <link href="js/jquery-easyui-1.3.6/themes/default/easyui.css" rel="stylesheet"/>
  <link href="js/jquery-easyui-1.3.6/themes/icon.css" rel="stylesheet"/> 
  <script type="text/javascript" src="js/jquery-easyui-1.3.6/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
  <script type="text/javascript"> 
    // 表格数据源 
    var data = []; 
    // 用代码造30条数据 
    for (var i = 1; i < 31; ++i) { 
      data.push({ 
        "id":i, 
        "name":"Student" + i 
      }) 
    } 
    $(function () { 
      $("#dd").datagrid({ 
        title:"测试本地分页", 
        rownumbers:true, 
        fitColumns:true, 
        pagination:true, 
        data:data.slice(0,10), 
        columns:[ 
          [ 
            {field:'id', align:"center", title:"编号",width:100},
            {field:'name', align:"center", title:"姓名",width:100}
          ] 
        ] 
      }); 
      var pager = $("#dd").datagrid("getPager"); 
      pager.pagination({ 
        total:data.length, 
        onSelectPage:function (pageNo, pageSize) { 
          var start = (pageNo - 1) * pageSize; 
          var end = start + pageSize; 
          $("#dd").datagrid("loadData", data.slice(start, end)); 
          pager.pagination('refresh', { 
            total:data.length, 
            pageNumber:pageNo 
          }); 
        } 
      }); 
    }); 
  </script> 
</head> 
<body> 
<div id="dd"></div> 
</body> 
</html>

运行效果如下图所示：

jQuery EasyUI datagrid实现本地分页的方法

jQuery EasyUI datagrid实现本地分页的方法

希望本文所述对大家的jQuery程序设计有所帮助。

84533871

84533871

相关推荐

WPF MVVM ComboBox(in DataGrid)触发事件SelectionChanged, 通知到ViewModel.

　　　　　　</ComboBox> 　　　　</DataTemplate>

89427412 / 0评论 2020-02-13

WPF DataGrid 绑定数据及时更新的处理

默认情况下datagrid绑定数据源后，在界面编辑某一列后，数据不会及时更新到内存对象中。如在同一行上有一个命令对来获取当前选中行发现，数据未更新过来。<DataGridTextColumn Header="规格型号" IsRea

morexyoung / 0评论 2019-12-20

jquery easyui DataGrid

var rows = $.datagrid; // get the updated rows only. { field: 'BNo', title: '牌号', width: 100 },<table id="tbList"

EdwardSiCong / 0评论 2015-04-11

实现easyui datagrid在没有数据时显示相关提示内容

　　本示例实现easyui datagrid加载/查询数据时，如果没有相关记录，则在datagrid中显示没有相关记录的提示信息，效果如下图所示。不同版本对appendRow和mergeCells支持不一样，参数不一致什么的。无法隐藏分页导航容器，可以用c

ningwentao / 0评论 2015-10-21

PHP直接修改表内容DataGrid功能实现代码

由于需要连接Oracle所以从二次开发和页面样式来说个人觉得phpMyDataGrid还是比较好上手。对于这两个文件就不多讲了，感兴趣的同学可以“打包带走”

zderam的私人 / 0评论 2019-09-02

datagrid清空所有数据

在使用easyui的treegrid或datagrid的过程经常会有这样的场景，如：需要按不同的类型加载数据时，如果选择的分类下没有数据应该把上次展示的数据清空，以免引用歧义。下面给出两种方法供初学者参考：

shanhuijava / 0评论 2016-08-17

easy ui获取datagrid的行数据方法

var rows = $.datagrid.rows[index];2，获取当前选择行数据：

ningwentao / 0评论 2016-03-07

datagrid行数据溢出时使用省略号代替

.datagrid-cell, .datagrid-cell-group, .datagrid-header-rownumber, .datagrid-cell-rownumber{. -o-text-overflow: ellipsis;text-ove

wndong / 0评论 2016-03-04

datagrid数据清空以及取消选择问题

本文转自http://www.easyui.info/archives/584.html这里表述的并不是很多新手不知道调用uncheckAll方法去取消勾选，而是很多人遇到了重新loadData后，如果新列表数据包含跟loadData之前一样的记录项，da

AngelicaA / 0评论 2015-12-22

jquery easyui datagrid 添加超链接

{field:'id',title: '角色管理',align: 'left',width:80,return "<a href='javacript:;' onclick='mngRol();'>角色管理</a>&quo

xiaobozhu / 0评论 2015-10-27

实现easyui datagrid在没有数据时显示相关提示内容

本示例实现easyui datagrid加载/查询数据时，如果没有相关记录，则在datagrid中显示没有相关记录的提示信息，效果如下图所示。不同版本对appendRow和mergeCells支持不一样，参数不一致什么的。无法隐藏分页导航容器，可以用chr

yypiao / 0评论 2015-10-21

jQuery EasyUI构建CRUD DataGrid教程

在本教程中，我们将为大家展示如何创建一个CRUD DataGrid。在这期间将使用到可编辑的datagrid插件来同这些crud操作一起工作。Step 1：在HTML标记中定义DataGrid<table id="dg" titl

小策一喋 / 0评论 2015-09-17

jQuery EasyUI DataGrid - 格式化列(formatter )

通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接我们都知道Jquery的EasyUI的datagrid可以添加并且自定义Toolbar，这样我们选择一行然后选择toolbar的相应按钮就可以对这行的数据进行操作。

小仙儿 / 0评论 2015-06-15

EasyUI datagrid 没有查询到数据显示提示

var columnLength = Grid.datagrid.length; // 获取表格列数。body.find.append('<tr><td width="'+body.width()+'" style=&

huzai / 0评论 2015-06-03

EasyUI DataGrid 编辑数据 加邮箱验证 Input 邮箱验证

var c = '<a href="#" onclick="cancelrow">取消</a>';<input type="text" validtype="

huzai / 0评论 2015-04-22

EasyUI-datagrid动态添加列（或者表头）

在开发项目过程中遇到了动态的修改datagrid的列，由于对前台或者Jquery不是很熟悉。刚开始打算动态的修改列的属性hidden=true或者false来显示或者隐藏列来达到效果，但是Jquery不太精通。最后经过折腾网上搜索，找到了一个方法，记录下来

zhangmingming / 0评论 2015-03-11

DataGrid 显示明细数据

return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';{titl

大数据实战派 / 0评论 2015-02-04

关于jquery easyui datagrid表格无法加载数据的解决办法

表格css不设置display,而设置position:absolute;left:-9999px;

葉無聞 / 0评论 2015-01-01

jQuery EasyUI Datagrid性能优化专题

jQuery EasyUI的Datagrid组件功能算是很强大了，不过性能确实不怎么乐观，而对于性能问题，网络上几乎也找不到相关的优化资料，所谓的牛人们可能 都望而却步了。本博客以后会带着分析Datagrid组件的性能问题，并且给出优化方案，也希望大家能集

sunnylinner / 0评论 2014-12-19

jquery easyui DataGrid 实例，增、删、查、改基础功能

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>. <!DOCT

pplxh / 0评论 2014-10-21

jquery easyui 1.2.5 的datagrid在初始化的时候会请求两次URL？

html代码中利用class声明了datagrid，导致easyUI解析class代码的时候先解析class声明中的datagrid，这样组件就 请求了一次url；然后又调用js初始化代码请求一次url。

mapdigit / 0评论 2014-10-06

jquery easyui 1.3.4 datagrid pageNumber 设置导致两次请求的解决方案

一、现象：$('#table').datagrid({url: '/get/data/path/to/your/server',pageNumber: 2,pageSize: 10,...});当手动设置 pageNumber >= 2 时，查看网络

83540198 / 0评论 2014-10-06

easyUI datagrid清空数据

$('#dataGridItem').datagrid('options').url='';$('#dataGridItem').datagrid('loadData',{total:0,rows:[]});

yypiao / 0评论 2014-09-17

jQuery Easyui datagrid动态列绑定

前几天有人在使用jQuery EasyUI的datagrid时，遇到不会动态绑定列的情况，而网上给出的例子可能也是比较早的处理办法，竟然需要修改easyui源码，其实解决这问题的思路是很简单，我们只需修改要显示的列即可。那位朋友最后改为这种处理时，发现还是

小源丶同学 / 0评论 2014-09-04

jQuery easyUI动态获取表结构并显示表中的数据）

从而实现类似oracle web版的sql查询。

愚盦 / 0评论 2014-07-23

jQuery EasyUI Datagrid组件的完整的基础DOM结构

标题可能有点长，什么叫“完整的基础DOM结构”，这里“基础”的意思是指这个结构不依赖具体数据，不依赖Datagrid的view属性，只要存在Datagrid实例就会存在这样的基础DOM结构；而“完整”的意思是指在冻结列，冻结行，标题，footer，分页这些

小烨 / 0评论 2014-07-14

datagrid--5 一些小的功能

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-equiv="ke

gufeijunchi / 0评论 2014-05-19

datagrid--4 行编辑模式

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-equiv="ke

moxiaoxi / 0评论 2014-05-19

jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用

当切换数据网格视图到 'detailview'，用户可以展开一行来显示一些行的明细在行下面。这个功能允许您为防止在明细行面板中的编辑表单提供一些合适的布局。在本教程中，我们使用数据网格组件来减小编辑表单所占据空间。步骤 1：在 HTML 标签中定义数据网格

yingzhicai / 0评论 2014-05-17

datagrid --3

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-equiv="ke

cyjsky / 0评论 2014-05-16

datagrid --2

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-equiv="ke

deerclops / 0评论 2014-05-15

JQuery Easy UI —— 如何让DataGrid自适应页面宽度

目前我还没发现Jquery-Easyui自带DataGrid自适应窗口的功能，因此简单写了一个实现方法，与网友们分享，也希望能够帮助有需要的朋友。* JQuery扩展方法，用户对JQuery EasyUI的DataGrid控件进行操作。* 修改DataGr

msyndra / 0评论 2014-05-08

flex使用java列表数据创建datagrid

<mx:DataGridColumn headerText="序号" dataField="confId" width="50" textAlign="center"/&

wndong / 0评论 2014-04-13

Flex4之DataGrid增删改同步数据库及页面数据示例总结

有关Flex的DataGrid文章的确不少，都是零零碎碎的，目前还没有发现有个完整的例子供网友参考，这次我花了两天时间做了下Flex关于DataGrid一个指标数据管理系统，当然设计到的mxml会很多，大都是与DataGrid相关，我就抽取最常用的Data

姚强 / 0评论 2014-04-01

jQuery EasyUI教程之datagrid应用（三）

设置“url”属性，用来装入远端服务器数据，服务器返回JSON格式数据。</table>定义datagrid列，将“pagination”属性设为true，将会在datagrid底部生成一个分页工具条。pagination会发送两个参数给服务器

publicTIM / 0评论 2014-03-18

jquery easyui datagrid 嵌套对象绑定

jquery easyui datagrid 嵌套对象绑定，网上很多资料说是easyui本身不支持嵌套对象绑定，但很多时候我们恰恰需要这种嵌套对象绑定，而实际上是可以实现且支持的，只需调用formatter函数就可以实现。

菜鸟新手taob / 0评论 2013-12-25

fsLayui数据表格使用

fsLayui 是一个基于layui的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置html实现数据请求，减少前端js重复开发的工作。-- 引入自定义css -->. v=1.4.1"></script>

nicepainkiller / 0评论 2019-06-26

Flex DataGrid之一（定义数据源直接赋值）

-- 将非可视元素放在此处 -->

AngelicaA / 0评论 2013-06-11

jQueryEasyUi行编辑打造增删改查

直接删除后，已删除行下面所有行的Index可能不正确，所以我的解决方法是新增时定义一个当前时间Id，然后每次点击后面的操作按钮时，jQuery获取当前行Id，然后selectRecord获得当前行真实Index. loadMsg : '数据加载中请稍后……

83453065 / 0评论 2013-06-06

【jQueryEasyUI总结】

}注意不光需要改变下面的数据列宽度，还需要改变上面Header列宽度，否则不起作用。

cloudwiseAPM / 0评论 2013-05-06

yui datagrid 模拟excel列头数据过滤

//获取当前右击列所在数据，组装成一个已列值为键的对象。currentVlaues[k]){//不存在就设置当前的icon为未选中状态

maoye / 0评论 2013-04-24

Easyui Datagrid IE8下数据加载很慢,IE会被卡住的直接原因

设置datagrid的每一列的width属性，不用让他自适应，取消所有自适应的选项，会很大程度上提高easyui的显示效率，我试过在IE上显示500条数据，效率是能接受的。在firefox上显示2000条都是能接受的，但是IE上超过500条就无法忍受了，所

wndong / 0评论 2013-04-17

Jquery easyui datagrid 分页 详解

由于项目原因，用了jquery easyui 感觉界面不错，皮肤样式少点，可是官网最近打不开了，资料比较少，给的demo没有想要的效果，今天在用datagrid 做分页显示的时候，折腾了半天，网上的资料也比较少，后自己动手，终于解决，废话不说，开始：。da

JeWangZhe / 0评论 2013-04-08

Jquery EasyUI datagrid分页

title : '联系电话',

87281248 / 0评论 2013-03-27

jQuery EasyUI Datagrid组件的基础完整DOM结构

标题可能有点长，什么叫“基础完整DOM结构”，这里“基础”的意思是指这个结构不依赖具体数据，不依赖Datagrid的view属性，只要存在 Datagrid实例就会存在这样的基础DOM结构；而“完整”的意思是指在冻结列，冻结行，标题，footer，分页这些

aaaaaaaa00 / 0评论 2013-03-20

得到EasyUI DataGrid中当前页行数，DataGrid接收JSON的数据格式

//注意你的数据源一定要定义了total，要不会为undefined，datagrid分页就是靠这个total定义。alert使用JQuery EasyUI的时候有时会为控件的接收数据烦恼，这个时候可以在官网中找到对应控件的例子，比如说。]}这里是以大括号

wndong / 0评论 2013-03-19

DOJO随手记

SCRIPT7002: XMLHttpRequest: 网络错误 0x80070005, 拒绝访问。<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1

levysnail / 0评论 2013-03-19

JQuery EasyUI datagrid 批量编辑和提交

text : "结束编辑",

83510998 / 0评论 2013-02-21

easyui datagrid 的数据加载

目前可能大多数人都是选择这种方式，因为跟流行的框架结合的也比较好，使用url的话，可以将url写在DOM里面或者申明datagrid对象的url属性，以下两种方式都是可以的：。load,param,加载第一页数据，param将代替默认查询参数，注意的是该方

huzai / 0评论 2013-02-06

基于jQuery内核Datagrid实现及功能介绍-EHT开发平台框架UI

向大家介绍下Datagrid的实现方式及EHT开发平台框架Datagrid的功能，DataGrid 大家都了解，DataGrid 简单的说，就是一个可滚动可调整列宽可选择等功能的数据表格。从上图可以看出该Datagrid具有列分组，多选，单选，表单等功能，

81751330 / 0评论 2013-01-27