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>

  

时间: 2024-08-29 14:09:42

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

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

前台easyui 的datagrid中设置分页属性: pagination:true,//显示分页 pagePosition:'bottom',//分页栏位置 both 上下 bottom.top pageList:[12,24,36]//分页数据大小 后台java代码中 int page ,int rows写set. get方法. page = Integer.parseInt(request.getParameter("page")); rows = Integer.parseIn

jquery easy-ui 分页插件的运用(给td添加事件,获取汇总内容)

<#include '/admin/express-header.html' > <div class="main" style=" background:#fff; padding: 15px 0px 8px 10px; margin: 0px;"><div class="ex-boxOne"> <label for="start_date">订阅日期:</label&g

easyui分页的使用方法

使用: $("#tt").datagrid("getPager").pagination(option); 例子: $("#tb").datagrid("getPager").pagination({ total: 100, pageSize: 10, pageList: [10,20,30], onSelectPage: function(pageNumber, pageSize) { console.log(pageNum

关于easyUI分页

首先前台会传来两个参数,分别是rows(一页数据的大小,即一页有多少条数据)和page(第几页),根据这两个参数可以计算出从数据库中从第几条数据开始取和要取多少条数据.数据取出来后,因为easyUI用的是ajax分页,因此要对数据进行一些处理,第一:把数据转化为jsonArray的形式,再把数据放到jsonObject中取名为rows,另外就是要计算出这次的数据的数目,把它也放到jsonObject中,取名为total,总共就是要返回rows和total这两个数据. @RequestMappin

easyui 分页实现

1.用datagrid 做分页显示, 根据API例子,终于解决,废话不说,datagrid分页 有一个附加的分页控件 通过在datagrid中设置pagination:true 就会显示分页 当请求是 后台会通过 获取page 获取当前页 根据rows每页显示条数 返回格式 {"total":486,"rows":[{"age":10,"email":"[email protected]","id

struts2 、mybatis 、easyui 分页

rows page 控件自动提交这两个参数 pageSize number The page size. 10pageNumber number Show the page number when pagination is created. 1pageList array User can change the page size. The pageList property defines how many size can be changed. [10,20,50,100] action

(转)EasyUI 分页总结

最近用到了easyui的分页和搜索栏功能,使用过程中由于运用不熟练导致其间也出现过一些问题,下面做个小结,供大家共同学习.1.首先使用EasyUI 的DataGrid分页,得加载其js类库:<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"><link rel="sty

MVC 使用Jquery EasyUI分页成功

先上图吧 你得先下载一个EasyUi框架,地址:http://www.jeasyui.net/download/ 在你的项目中需要引用,前台代码如下: DataGrid.cshtml @{ Layout = null; } <!DOCTYPE html> <html> <head> <title>DDL</title> <link href="../../Scripts/JqueryEasyUi/themes/default/ea

springmvc+mybatis+easyui分页

道德三黄五帝,功名夏侯商周.五霸七雄闹春秋,顷刻兴亡过手.清时几行名姓,北芒无数荒丘.前人播种后人收,说什么原创与否. 今天和大家分享一下springmvc+mybatis+easyui的分页实现.springmvc,mybatis的优缺点不做太多敖述大家都比较了解了,ssm框架整合的例子网上也有很多了,为什么还要写这篇文章那,主要是觉得大多过于零散配置方式又是千差万别,总结一下本文希望对遇到此问题的人有所帮助,前人播种后人收.当然程序开发没有觉得正确,谁也说不出一个正确的实现第N行代码是什么,