实现Datagrid分页

Html页面:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <!-- 引入相关CSS -->
    <!-- BaseCss -->
    <link rel='stylesheet' href='/Styles/base.css' />
    <link rel='stylesheet' href='/Styles/table.css' />
    <link rel='stylesheet' href='/Scripts/lib/loadmask/jquery.loadmask.css' />
    <!-- XUICss -->
    <link rel='stylesheet' href='/Scripts/lib/easyUI/themes/gray/easyui.css' />
    <link rel='stylesheet' href='/Scripts/lib/easyUI/themes/icon.css' />
    <link rel='stylesheet' href='/Scripts/lib/easyUI/themes/xUI.css' />
    <!-- 引入相关JS -->
    <!-- JQueryJs -->
    <script src='/Scripts/lib/jquery/jquery.min.js'></script>
    <script src='/Scripts/lib/jquery/jquery.json-2.3.min.js'></script>
    <script src='/Scripts/lib/jquery/jquery.extend.js'></script>
    <!-- JQueryJs -->
  
    <script src="/Scripts/lib/jquery/jquery.json-2.3.min.js"></script>
    <!-- BaseJs -->
    <script src="/Scripts/base.js"></script>
    <script src="/Scripts/lib/loadmask/jquery.loadmask.js"></script>
    <!-- XUIJs -->
    <script src="/Scripts/lib/easyUI/jquery.easyui.min.js"></script>
    <script src="/Scripts/lib/artDialog/artDialog.source.js?skin=chrome"></script>
    <script src="/Scripts/lib/artDialog/artDialog.iframe.source.js?skin=chrome"></script>
    <script src="/Scripts/xUI/xui.all.js"></script>
    <script type="text/javascript">

        (function () {
            var myModObj = {
                /*公共变量存储*/
                dataStore: {
                    ajaxUrl: "/Flow/Controls/Comm/VoteAjax.ashx"//ajax路径
                },
                /*组件对象存储*/
                uiStore: {
                    gvVoteResultDetailList: null,
                },
                /*初始化*/
                init: function () {
                    this.initUI(); //初始化组件
                    this.initData(); //初始化数据
                    this.initEvent(); //初始化事件
                },
                /*初始化组件*/
                initUI: function () {
                    var that = this;
                    var setList = {
                        title: '投票明细',                      
                        iconCls: 'icon-table',
                        serverPaging: true,
                getServerData: this.loadVoteResultDetail,
                        columns: [[
                              { field: 'USER_NO', title: '投票人',  200, align: 'center' },
                              { field: 'VOTE_RESULT_ZQ', title: '债券等级',  200, align: 'center' },
                              { field: 'VOTE_RESULT_ZT', title: '主体等级',  200, align: 'center' },
                              {
                                  field: 'VOTE_RESULT_ZW', title: '展望',  200, align: 'center',
                                  formatter: function (value) {
                                      switch (value) {
                                          case "0":
                                              return "负面";
                                          case "1":
                                              return "稳定";
                                          case "2":
                                              return "正面";
                                          default:
                                              return "";
                                      }
                                  }
                              },
                              { field: 'IMP_TIME', title: '投票时间',  200, align: 'center',align: "center" },
                              { field: 'NOTE_CONTENT', title: '投票意见',  200, align: 'left' }
                        ]],
                    }
                    //创建投票明细数据表格
                    that.uiStore.gvVoteResultDetailList = $('#gvVoteResultDetailList').createDatagrid(setList);
                },
                /*初始化数据*/
                initData: function () {
                    var that = modVoteResultCtrl;
                    that.loadVoteResult();//获取投票结果                  
                    that.loadVoteResultDetail();//获取投票结果明细
                    //显示body
                    $("body").css("visibility", "visible");
                },
                /*初始化事件*/
                initEvent: function () {
                },
                //获取投票结果
                loadVoteResult: function () {
                    var that = modVoteResultCtrl;
                    var param = {
                        reqType: "GetVoteResult",
                        instID: "555",
                        stepID: "555"
                    };
                    that.ajaxDeal(that.dataStore.ajaxUrl, param, loadDataSuc);
                    //加载数据
                    function loadDataSuc(result) {
                        for (var i = 0; i < result.data.length; i++) {                           
                            if(result.data[i].VOTE_TYPE == '债券等级')
                            {
                                $("#lblZQDJ").text(result.data[i].GRADE);
                            }
                            if (result.data[i].VOTE_TYPE == '主体等级')
                            {
                                $("#lblZTDJ").text(result.data[i].GRADE);
                            }
                            if(result.data[i].VOTE_TYPE == '展望')
                            {
                                var grade = result.data[i].GRADE;                              
                                if ( grade == '0') {
                                    $("#lblZW").text("负面");
                                }
                                else if (grade == '1') {
                                    $("#lblZW").text("稳定");
                                }
                                else {
                                    $("#lblZW").text("正面");
                                }
                            }
                        }
                    }
                },                              
                //获取投票结果明细
                loadVoteResultDetail: function (pageNumber, pageSize) {
                    var that = modVoteResultCtrl;
                    //处理页码
                    if (pageNumber == undefined || pageSize == undefined) {
                        pageNumber = that.uiStore.gvVoteResultDetailList.getPageNumber();
                        pageSize = that.uiStore.gvVoteResultDetailList.getPageSize();
                    }
                    var param = {
                        reqType: "GetVoteResultDetail",
                        instID: "555",
                        stepID: "555",
                        pageSize: pageSize,//每页数据
                        pageNum: pageNumber//页数
                    };
                    that.ajaxDeal(that.dataStore.ajaxUrl, param, loadDataSuc);
                    //加载数据
                    function loadDataSuc(result) {
                        var dataInfo = {//分页信息
                            total: result.data.length <= 0 ? 0 : result.data[0].TOTAL_COUNT,//与数据库中总记录数字段对应
                            rows: result.data
                        }                      
                        that.uiStore.gvVoteResultDetailList.loadData(dataInfo);
                    }
                }
            };
            //赋给公共的对象
            exp.modVoteResultCtrl = myModObj;
        })();
        /**
        * 引入公共工具集及其他模块
        */
        window.modVoteResultCtrl = imp(["baseHelper", "modVoteResultCtrl"]);
        /**
        * 页面初始化
        */
        $(function () {
            modVoteResultCtrl.init();
        });
    </script>
</head>
<body style="visibility:hidden">
    <div>
        <div title="投票结果" class="easyui-panel" icon="icon-edit" collapsible="true" style=" auto; height: auto; padding: 5px;">
            <table class="tableList">
                <tr>
                    <td class="title" align="center">债券等级:</td>
                    <td>
                        <label id="lblZQDJ" />
                    </td>
                    <td class="title" align="center">主体等级:</td>
                    <td>
                        <label id="lblZTDJ" />
                    </td>
                    <td class="title" align="center">展望:</td>
                    <td>
                        <label id="lblZW" />
                    </td>
                </tr>
            </table>
        </div>
        <table id="gvVoteResultDetailList"></table>
    </div>
</body>
</html>

 VoteAjax页面:

       private string GetVoteResultDetail()
        {
            var instID = GetQueryString("instID");
            var stepID = GetQueryString("stepID");
            var pageSize = GetQueryString("pageSize");
            var pageNum = GetQueryString("pageNum");

            var rownum = PageRowNum(pageSize, pageNum);
            var a = rownum[0].ToString();
            var b = rownum[1].ToString();
            Dictionary<string, string> param = new Dictionary<string, string>();
            param.Add("instID", instID);
            param.Add("stepID", stepID);
            param.Add("beginRowNum", rownum[0].ToString());
            param.Add("endRowNum", rownum[1].ToString());
            //执行           
            var data = FlowCtrlProjIndivService.GetService().GetVoteResultDetail(param);
            //返回结果
            return new
            {
                state = "ok",
                data = data
            }.ToJson();
        }

Dao层:

 public DataTable GetVoteResultDetail(Dictionary<string, string> param)
        {
            return BLLService.GetDataTable(
                       "PKG_TEST.VOTE_RESULT_DETAIL_LIST",
                       "P_INST_ID", param["instID"],
                       "P_STEP_ID", param["stepID"],
                       "P_BEG_ROW_NUM", param["beginRowNum"],
                       "P_END_ROW_NUM", param["endRowNum"]
                       );
        }

存储过程:

 PROCEDURE VOTE_RESULT_DETAIL_LIST
  (
    P_DATA_SET OUT REDATASET.DS,
    P_INST_ID  IN TWF_D_VOTE.INST_ID%TYPE,
    P_STEP_ID  IN TWF_D_VOTE.STEP_ID%TYPE,
    P_BEG_ROW_NUM IN INTEGER, --起始行数
    P_END_ROW_NUM IN INTEGER --终止行数
  ) AS
  BEGIN
    OPEN P_DATA_SET FOR
    SELECT *
  FROM (SELECT ROWNUM RN, G.*
          FROM (SELECT COUNT(*) OVER() TOTAL_COUNT,
                       A.USER_NO,
                       VOTE_RESULT_ZQ,
                       VOTE_RESULT_ZT,
                       VOTE_RESULT_ZW,
                       NOTE_CONTENT,
                       IMP_TIME
                  FROM (SELECT INST_ID,
                               STEP_ID,
                               USER_NO,
                               VOTE_RESULT VOTE_RESULT_ZQ,
                               IMP_TIME
                          FROM TWF_D_VOTE
                         WHERE VOTE_TYPE = '债券等级'
                           AND INST_ID = P_INST_ID
                           AND STEP_ID = P_STEP_ID
                         ORDER BY IMP_TIME DESC) A
                 INNER JOIN (SELECT INST_ID,
                                   STEP_ID,
                                   USER_NO,
                                   VOTE_RESULT VOTE_RESULT_ZT
                              FROM TWF_D_VOTE
                             WHERE VOTE_TYPE = '主体等级') B
                    ON A.USER_NO = B.USER_NO
                   AND A.STEP_ID = B.STEP_ID
                   AND A.INST_ID = B.INST_ID
                 INNER JOIN (SELECT INST_ID,
                                   STEP_ID,
                                   USER_NO,
                                   VOTE_RESULT VOTE_RESULT_ZW
                              FROM TWF_D_VOTE
                             WHERE VOTE_TYPE = '展望') D
                    ON A.USER_NO = D.USER_NO
                   AND A.STEP_ID = D.STEP_ID
                   AND A.INST_ID = D.INST_ID
                 INNER JOIN (SELECT INST_ID, STEP_ID, USER_NO, NOTE_CONTENT
                              FROM TWF_D_NOTE
                             WHERE NOTE_TYPE = '投票意见') E
                    ON A.USER_NO = E.USER_NO
                   AND A.STEP_ID = E.STEP_ID
                   AND A.INST_ID = E.INST_ID) G
         WHERE ROWNUM <= P_END_ROW_NUM) H
 WHERE RN >= P_BEG_ROW_NUM;
END VOTE_RESULT_DETAIL_LIST;
原文地址:https://www.cnblogs.com/ChenMM/p/9843642.html