来自于四明山的码农

 

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>

　　

posted on 2015-06-11 17:11  技术先锋  阅读(860)  评论(0)    收藏  举报

导航