千言万语尽在代码中，可以自己看，不清楚留言吧！

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="realData.aspx.cs" Inherits="webapp.realData" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6.     <title>直流故障录波器</title>
  7.     <link href="content/templates/deepgreen/css/common.css" type="text/css" rel="Stylesheet" />
  8.     <script src="content/easyUI/jquery-1.7.2.min.js" type="text/javascript"></script>
  9.     <script src="content/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
  10.     <script src="content/easyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
  11.     <script src="Scripts/Common.js" type="text/javascript"></script>
  12.     <link href="content/easyUI/themes/gray/easyui.css" rel="stylesheet" type="text/css" />
  13.     <link href="content/easyUI/themes/icon.css" rel="stylesheet" type="text/css" /> 
  14.  
  15.       <script type="text/javascript">
  16.         function pagerFilter(data) {
  17.             if (typeof data.length == 'number' && typeof data.splice == 'function') {    // 判断数据是否是数组
  18.                 data = {
  19.                     total: data.length,
  20.                     rows: data
  21.                 }
  22.             }
  23.             var dg = $(this);
  24.             var opts = dg.datagrid('options');
  25.             var pager = dg.datagrid('getPager');
  26.             pager.pagination({
  27.                 onSelectPage: function (pageNum, pageSize) {
  28.                     opts.pageNumber = pageNum;
  29.                     opts.pageSize = pageSize;
  30.                     pager.pagination('refresh', {
  31.                         pageNumber: pageNum,
  32.                         pageSize: pageSize
  33.                     });
  34.                     dg.datagrid('loadData', data);
  35.                 }
  36.             });
  37.             if (!data.originalRows) {
  38.                 data.originalRows = (data.rows);
  39.             }
  40.             var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
  41.             var end = start + parseInt(opts.pageSize);
  42.             data.rows = (data.originalRows.slice(start, end));
  43.             return data;
  44.         }
  45.  
  46.         $(function () {
  47.             $.post('handlerRealData.ashx', { action: "ycData" }, function (data) {
  48.                 data = eval("(" + data + ")")
  49.                 console.log("123344565");
  50.                 console.log(data);
  51.                 $('#tab_realdatalist').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', data);
  52.             });
  53.  
  54.             $.post('handlerRealData.ashx', { action: "yxData" }, function (data) {
  55.                 data = eval("(" + data + ")")
  56.                 console.log("123344565");
  57.                 console.log(data);
  58.                 $('#tab_statuslist').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', data);
  59.             });
  60.  
  61.         });
  62.  
  63.       </script>
  64. </head>
  65. <body>
  66.     <div style="margin: 20px 0 10px 0;">
  67.     </div>
  68.     <div class="easyui-tabs" style="width: 1170px; height: 550px">
  69.         <div title="设备实时数据" style="padding: 10px">
  70.             <table id="tab_realdatalist" data-options="
  71.         rownumbers:true,
  72.         singleSelect:true,
  73.         autoRowHeight:false,
  74.         pagination:true,
  75.         pageSize:10,
  76.          height: 470
  77.         ">
  78.                 <thead>
  79.                     <tr>
  80.                   <th field="f_occurtime" width="200">
  81.                             时间
  82.                         </th>
  83.                         <th field="telecode" width="110">
  84.                             测点编号
  85.                         </th>
  86.                         <th field="teleName" width="300">
  87.                             测点名称
  88.                         </th>
  89.                         <th field="f_value" width="100">
  90.                             测点值
  91.                         </th>
  92.                     </tr>
  93.                 </thead>
  94.             </table>
  95.         </div>
  96.         <div title="设备状态" style="padding: 10px">
  97.             <table id="tab_statuslist" data-options="
  98.         rownumbers:true,
  99.         singleSelect:true,
  100.         autoRowHeight:false,
  101.         pagination:true,
  102.         height: 470,
  103.         pageSize:10">
  104.                 <thead>
  105.                     <tr>
  106.                         <th field="telecode" width="110">
  107.                             测点编号
  108.                         </th>
  109.                         <th field="teleName" width="300">
  110.                             测点名称
  111.                         </th>
  112.                         <th field="f_value" width="100">
  113.                             测点状态
  114.                         </th>
  115.                     </tr>
  116.                 </thead>
  117.             </table>
  118.         </div>
  119.     </div>
  120.  
  121. </body>
  122. </html>

　　

easyui分页，根据网友的一段代码优化了一下的更多相关文章

  1. 【技巧】EasyUI分页组件pagination显示项控制

    我们使用easyui分页时,分页组件显示项有很多,默认如下是这样的: 有时候我们并不想显示这么多控制项,我们可以通过属性来控制:如下来自EasyUI官网: 如下写法,在datagrid中使用,如下控制 ...

  2. easyui分页的使用方法

    使用: $("#tt").datagrid("getPager").pagination(option); 例子: $("#tb").dat ...

  3. MVC 使用Jquery EasyUI分页成功

    先上图吧

  4. easyui 分页实现

    1.用datagrid 做分页显示, 依据API样例,最终解决.废话不说,datagrid分页 有一个附加的分页控件 通过在datagrid中设置pagination:true 就会显示分页 当请求是 ...

  5. 后台使用oracle前台使用easyui分页机制

    前台easyui 的datagrid中设置分页属性: pagination:true,//显示分页 pagePosition:'bottom',//分页栏位置 both 上下 bottom.top p ...

  6. Spring+SpringMVC+MyBatis+easyUI整合优化篇（八）代码优化整理小记及个人吐槽

    日常啰嗦 这两天也一直在纠结这一篇文章该写什么东西,前面临时加的两篇文章就有些打乱了整体节奏,这一篇又想去写一下代码层面优化的事情,可是也不太能抓住重要的点,不太确定从何入手,因为这件事情牵涉了太多技 ...

  7. easyUI分页实现加搜索功能

    前台页面: js代码: ps:pagination为true时会在table下面加上easyUI的分页. load函数会将查询值传给datagrid并传给后台重新加载. DAO.xml为: 后台代码实 ...

  8. (转)EasyUI 分页总结

      最近用到了easyui的分页和搜索栏功能,使用过程中由于运用不熟练导致其间也出现过一些问题,下面做个小结,供大家共同学习.1.首先使用EasyUI 的DataGrid分页,得加载其js类库:< ...

  9. EasyUI 分页 简洁代码

    做分页代码,看到网上很多人实现的方法,那是各种调用,各种获取对象.我很不解,因为Easyui已经给我们了分页的具体实现,为什么有些人要画蛇添足呢. 其实真正的分页,在你的代码中,别人可能都没有注意到, ...

随机推荐

  1. delphi2010 域名转换IP

    uses winsock; function GetHostIp_wwwdelphitopcom(HostName: string): string; type   tAddr = array[0.. ...

  2. time_base

    From:http://blog.csdn.net/supermanwg/article/details/14521869 FFMPEG的很多结构中有AVRational time_base;这样的一 ...

  3. centos6.2 安装Mysql5.6

    1. mysql官网下载rpm包 [root@slave2 home]# ls hbase  hive  mysql  mysql57-community-release-el6-11.noarch. ...

  4. form表单钩子，局部钩子和全局钩子

    form表单源码解析: 局部钩子: 全局钩子:

  5. 前端基础-JavaScript

    转载地址:http://www.cnblogs.com/yuanchenqi/articles/6893904.html 一.Javascript结构   ECMAScript  ECMAScript ...

  6. nvm+nodejs+npm

    安装nvm 1.下载nvm包,地址:https://github.com/coreybutler/nvm-windows/releases选择nvm-setup.zip下载, 解压,双击安装即可 2. ...

  7. Xcode 如何导入IOS项目

    前言:基于mac上如何导入ios项目的文章,手机自动化项目需要进行手机元素定位,前提是导入IOS项目 1.安装Xcode 到官网下载mac版Xcode:当前使用版本Version 7.3.1 http ...

  8. JQ获取选中select 标签的值

    Jq://#ses为select 标签的Id$("#ses option:selected").val(); $("#ses option:selected") ...

  9. Eclipse svn 项目 星号

    上图: 明明没有文件修改过就是无脑显示有提交的文件,有强迫症受不了. 而且每次提交你都点开看有没有漏掉啥文件.很麻烦.也很难受 .很容易漏提交 把本地文件跟SVN同步对比一下. 果然有文件. 添加规则 ...

  10. Spring MVC 学习笔记12 —— SpringMVC+Hibernate开发（1）依赖包搭建

    Spring MVC 学习笔记12 -- SpringMVC+Hibernate开发(1)依赖包搭建 用Hibernate帮助建立SpringMVC与数据库之间的联系,通过配置DAO层,Service ...