接上一篇EasyUI项目驱动学习

DataGrid数据表格及Pagination分页一起介绍

一、通过<table>标记创建DataGrid,嵌套<th>标签定义列表

<table id="dg" class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"></th>
<th data-options="field:'username',width:100">
名称
</th>
<th data-options="field:'orgname',width:100">
组织机构
</th>
<th data-options="field:'state',width:100">
状态
</th>
<th data-options="field:'loginname',width:100">
登录名
</th>
<th data-options="field:'ctime',width:100">
创建时间
</th>
</tr>
</thead>
</table>
<!-- 分页栏 -->
<div id="dom_var_pagination" class="easyui-pagination"></div>

二、加载数据表格

$("#dg").datagrid( {
url : 'getUserAction.action',
closable : true,
checkOnSelect : true,
striped : true,
rownumbers : true,
'toolbar' : '',
fitColumns : true,
loadFilter : function(data) {
var data_ = {
"rows" : data.resultList, //行数据
"total" : data.totalSize //总记录数
}
$("#dom_var_pagination").pagination( {
total : data.totalSize
});
return data_;
}
});

data.resultList 为后台返回的JSON格式的数据

如:[{id=1,loginname=zhangsan,username=zhangsan,state=可用, ctime=2014-01-01}]

再此后台代码就不再叙述,需要的话 可下载演示代码:http://download.csdn.net/detail/itmyhome/7609373

三、分页

$("#dom_var_pagination").pagination( {
onSelectPage: function(pageNumber, pageSize){
$('#dg').datagrid('load',{
pagesize: pageSize,
currentPage: pageNumber
});
}
});

效果截图:

项目源码下载:http://download.csdn.net/detail/itmyhome/7609373

转载请注明出处:http://blog.csdn.net/itmyhome1990/article/details/37563551

EasyUI DataGrid及Pagination的更多相关文章

  1. EasyUI DataGrid和Pagination

    连接一台EasyUI项目驱动学习 DataGrid数据表格及Pagination分页一起介绍 一.通过<table>标记创建DataGrid,嵌套<th>标签定义列表 < ...

  2. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页

    系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...

  3. easyui datagrid 没数据时显示滚动条的解决方法

    今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...

  4. easyUI datagrid editor扩展dialog

    easyUI datagrid简单使用:着重两点1.editor对象的click事件:2.将dialog窗体内的值填写到当前正编辑的单元格内 <!DOCTYPE html> <htm ...

  5. easyui datagrid标题列宽度自适应

    最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体 ...

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

    本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1 ...

  7. 初识 easyui datagrid

    首先应该下载好easyui datagrid所用的各种js 和css 这个可以到官网上去下载. 首先要引入datagrid所引入的js和css. <script src="js/jqu ...

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

    http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1% ...

  9. jquery easyui datagrid使用参考

    jquery easyui datagrid使用参考   创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...

随机推荐

  1. lua for通过循环table一些差异

    有两个著名的是:ipairs和pairs,双方都认为,我们都非常熟悉的.其中ipairs刮(idx=1)从明年序遍历,经验nil那退出循环:和pairs遍历,仅仅要里面有值都能够遍历的到. 那假如我须 ...

  2. Fun<>,匿名方法,Lambda表达式 冒泡排序C#

    大头文 分享,进步 冒泡排序C#实现,使用委托,包括三种方式:Fun<>,匿名方法,Lambda表达式 冒泡排序是一种简单的排序方法,适合于小量数字排序,对于大量数字(超过10个),还有更 ...

  3. C语言qsort函数算法性能测试

    对于该算法的复杂性.一个直接的方法是测量的一定量的算法级数据的执行时间的感知. 随着C语言提供qsort对于示例.随着100一万次的数据,以测试其计算量.感知O(nlg(n))时间成本: C码如下面: ...

  4. Java NIO的多路复用及reactor

    (from:http://developer.51cto.com/art/201112/306489.htm) 以下描述,为了说明问题,就提提历史(类似的东西,网上一搜一大把,但是希望你能在这里止步, ...

  5. C#中四个判等函数的认识

    donet提供了四个判等函数,分别是referenceEqual,静态Equal,具体类型Equal,和==. 首先来说,object.referenceEqual和静态Equal public st ...

  6. linux cat

    cut是一个选取命令,就是将一段数据经过分析,取出我们想要的.一般来说,选取信息通常是针对“行”来进行分析的,并不是整篇信息分析的. (1)其语法格式为:cut  [-bn] [file] 或 cut ...

  7. 使用Jenkins来构建Docker容器

    使用Jenkins来构建Docker容器(Ubuntu 14.04) 当开发更新了代码,提交到Gitlab上,然后由测试人员触发Jenkins,于是一个应用的新版本就被构建了.听起来貌似很简单,dua ...

  8. javascript通过数日两个日期之间的比较分离

    $(function () {  var starttime = transdate("2014-09-30 15:53:00");  var endtime = transdat ...

  9. winsock2之最简单的win socket编程

    原文:winsock2之最简单的win socket编程 server.cpp #include <WINSOCK2.H> #include <stdio.h> #pragma ...

  10. jmgraph前端画图组件(html5版)

    原文:jmgraph前端画图组件(html5版)      jmgraph是一个基于html5的WEB前端画图组件.        前端画图对象控件化,支持鼠标和健盘事件响应,可对单个控件样式设定,支 ...