easyui分页,根据网友的一段代码优化了一下
千言万语尽在代码中,可以自己看,不清楚留言吧!
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="realData.aspx.cs" Inherits="webapp.realData" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>直流故障录波器</title>
<link href="content/templates/deepgreen/css/common.css" type="text/css" rel="Stylesheet" />
<script src="content/easyUI/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="content/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="content/easyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="Scripts/Common.js" type="text/javascript"></script>
<link href="content/easyUI/themes/gray/easyui.css" rel="stylesheet" type="text/css" />
<link href="content/easyUI/themes/icon.css" rel="stylesheet" type="text/css" /> <script type="text/javascript">
function pagerFilter(data) {
if (typeof data.length == 'number' && typeof data.splice == 'function') { // 判断数据是否是数组
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage: function (pageNum, pageSize) {
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh', {
pageNumber: pageNum,
pageSize: pageSize
});
dg.datagrid('loadData', data);
}
});
if (!data.originalRows) {
data.originalRows = (data.rows);
}
var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
} $(function () {
$.post('handlerRealData.ashx', { action: "ycData" }, function (data) {
data = eval("(" + data + ")")
console.log("123344565");
console.log(data);
$('#tab_realdatalist').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', data);
}); $.post('handlerRealData.ashx', { action: "yxData" }, function (data) {
data = eval("(" + data + ")")
console.log("123344565");
console.log(data);
$('#tab_statuslist').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', data);
}); }); </script>
</head>
<body>
<div style="margin: 20px 0 10px 0;">
</div>
<div class="easyui-tabs" style="width: 1170px; height: 550px">
<div title="设备实时数据" style="padding: 10px">
<table id="tab_realdatalist" data-options="
rownumbers:true,
singleSelect:true,
autoRowHeight:false,
pagination:true,
pageSize:10,
height: 470
">
<thead>
<tr>
<th field="f_occurtime" width="200">
时间
</th>
<th field="telecode" width="110">
测点编号
</th>
<th field="teleName" width="300">
测点名称
</th>
<th field="f_value" width="100">
测点值
</th>
</tr>
</thead>
</table>
</div>
<div title="设备状态" style="padding: 10px">
<table id="tab_statuslist" data-options="
rownumbers:true,
singleSelect:true,
autoRowHeight:false,
pagination:true,
height: 470,
pageSize:10">
<thead>
<tr>
<th field="telecode" width="110">
测点编号
</th>
<th field="teleName" width="300">
测点名称
</th>
<th field="f_value" width="100">
测点状态
</th>
</tr>
</thead>
</table>
</div>
</div> </body>
</html>
easyui分页,根据网友的一段代码优化了一下的更多相关文章
- 【技巧】EasyUI分页组件pagination显示项控制
我们使用easyui分页时,分页组件显示项有很多,默认如下是这样的: 有时候我们并不想显示这么多控制项,我们可以通过属性来控制:如下来自EasyUI官网: 如下写法,在datagrid中使用,如下控制 ...
- easyui分页的使用方法
使用: $("#tt").datagrid("getPager").pagination(option); 例子: $("#tb").dat ...
- MVC 使用Jquery EasyUI分页成功
先上图吧
- easyui 分页实现
1.用datagrid 做分页显示, 依据API样例,最终解决.废话不说,datagrid分页 有一个附加的分页控件 通过在datagrid中设置pagination:true 就会显示分页 当请求是 ...
- 后台使用oracle前台使用easyui分页机制
前台easyui 的datagrid中设置分页属性: pagination:true,//显示分页 pagePosition:'bottom',//分页栏位置 both 上下 bottom.top p ...
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(八)代码优化整理小记及个人吐槽
日常啰嗦 这两天也一直在纠结这一篇文章该写什么东西,前面临时加的两篇文章就有些打乱了整体节奏,这一篇又想去写一下代码层面优化的事情,可是也不太能抓住重要的点,不太确定从何入手,因为这件事情牵涉了太多技 ...
- easyUI分页实现加搜索功能
前台页面: js代码: ps:pagination为true时会在table下面加上easyUI的分页. load函数会将查询值传给datagrid并传给后台重新加载. DAO.xml为: 后台代码实 ...
- (转)EasyUI 分页总结
最近用到了easyui的分页和搜索栏功能,使用过程中由于运用不熟练导致其间也出现过一些问题,下面做个小结,供大家共同学习.1.首先使用EasyUI 的DataGrid分页,得加载其js类库:< ...
- EasyUI 分页 简洁代码
做分页代码,看到网上很多人实现的方法,那是各种调用,各种获取对象.我很不解,因为Easyui已经给我们了分页的具体实现,为什么有些人要画蛇添足呢. 其实真正的分页,在你的代码中,别人可能都没有注意到, ...
随机推荐
- Windows下 训练Tesseract实现识别图片中的文字
介绍 Tesseract是一个基于Apache2.0协议开源的跨平台ocr引擎,支持多种语言的识别,在Windows和Linux上都有良好的支持. 源代码在这: 源码地址 有一个编译打包好的Windo ...
- hbase 核心知识
Hbase 负载均衡 Hbase全局计划 Hbase全局计划执行的流程--估算 Hbase随机分配计划 Hbase 批量启动分配计划 Hbase 通过shell控制负载均衡 何时使用HBase
- 洛谷 P1823 音乐会的等待
题目描述 N个人正在排队进入一个音乐会.人们等得很无聊,于是他们开始转来转去,想在队伍里寻找自己的熟人.队列中任意两个人A和B,如果他们是相邻或他们之间没有人比A或B高,那么他们是可以互相看得见的. ...
- @Autowired与@Resource 详细诠释和区别(附带例子)
@Autowired 与@Resource:1.@Autowired与@Resource都可以用来装配bean. 都可以写在字段上,或写在setter方法上. 2.@Autowired默认按类型装配( ...
- 了解Katalon的安装及基本使用(for mac)
一.整体了解: 2018 top 6的自动化测试工具(网上了解): 1. Selenium 2. Katalon Studio 3. UFT 4. Watir 5. IBM Rational Func ...
- vue2.0自定义指令
前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对 ...
- git代理设置
git config --global http.proxy http://127.0.0.1:1080git config --global https.proxy https://127.0.0. ...
- 以虎嗅网4W+文章的文本挖掘为例,展现数据分析的一整套流程
本文转自知乎 作者:苏格兰折耳喵 ----------------------------------------------------- 本文作者将结合自身经验,并以实际案例的形式进行呈现,涉及从 ...
- 【3-28】javascript简介及语法
一.简介 (一)定义:JavaScript是一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,需有宿主文件:html文件. (二)作用:1.进行数据运算 2.对浏览器事件作出响 ...
- 1. apache如何启动
进入apache安装目录/bin/底下,用命令:./apachectl start 启动