asp.net学习_分页的设计

分页是每一个程序员都每天都在打交道的东西,分页.

一年前,刚接触的时候,根本不知道什么叫做分页,后台,xxx说,如果数据过多一次,成千上万条,你一次只看到10-20条,为什么要全部显示呢?当时感觉很震撼,为什么呢?

以下内容是以前的代码(不要扔鸡蛋,我现在看了都有恨不得砸电脑的冲动)

于是我们就用了第一个分页版本,当时,两个实验室的"战士"研究了好久,找到一个存储过程的分页,当时感觉好神奇!找找当时凌乱的分页调用程序:

现在看了都要砸电脑的冲动的东东.....

后来做web,凌乱依旧,web版本的分页程序,

后来才发现一个叫做aspnetpager的控件,发现好强大呀,易用,方便,而且不用写那么复杂的存储过程以及调用,

慢慢的发现,这些控件都是死的,写死的东西,根本没有灵活性,特别是美工做个好看点的分页之类的,只能干瞪眼,要不就按照它的格式做分页样式,这是一个纠结的问题,

既然不灵活,为什么不自己做控件?

后来就自己写分页的用户控件....

不过仍然不够灵活,上网找资料.

发现,手写一个分页类就行了,分页不就是计算页面大小,然后输出页码和连接么?

然后就是这个版本

  //  //记录日志
    private static readonly log4net.ILog logger = log4net.LogManager.GetLogger(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType);
    //输出的PagerHtml代码
    public string PagerHtml = "";
    protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            string TypeId = Request["TypeId"];
            //查询条件
            string strCondition = "";
            //字符串注入检测
            if (!string.IsNullOrEmpty(TypeId) && Tools.IsValidInput(ref TypeId, true))
                strCondition = "TypeId=" + TypeId;

            //分页实现
            var pager = new Common.RupengPager();
            pager.UrlFormat = "NewsList.aspx?pagenum={n}&TypeId=" + TypeId;
            pager.PageSize = 30;
            pager.TryParseCurrentPageIndex(Request["pagenum"]);

            //分页数据读取
            newsBLL bll = new newsBLL();
            DataTable dt = bll.ListByPaginationForView("Time", pager.PageSize, pager.CurrentPageIndex, "1", strCondition);

            //获取总页数
            pager.TotalCount = bll.GetVNewsListCount(strCondition);
            rpData.DataSource = dt;
            rpData.DataBind();

            //渲染页码条HTML
            PagerHtml = pager.Render();
        }
        catch (Exception ex)
        {
            logger.Error("错误:", ex);
        }
    }

效果也就是这样:

前台就是

<%@ Page Language="C#" MasterPageFile="~/InfoPage.master" AutoEventWireup="true" CodeFile="NewsList.aspx.cs" Inherits="News_NewsList" Title="新闻列表" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link href="../css/other.css" rel="stylesheet" type="text/css" />
    <link href="../css/Pager.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <%--GetNewsTypeInfoForNewsByJson--%>

   <div class="list">
        <div class="list_title"><h4>新闻列表</h4><span>当前位置：<a href="../Default.aspx">首页</a> > 新闻列表</span></div>
        <ul>
            <asp:Repeater ID="rpData" runat="server">
            <ItemTemplate>
             <li><a href='ViewNews.aspx?NewsId=<%#Eval("Id") %>'>[<%#Eval("TypeName")%>]<%#Eval("Title")%></a><span><%#Eval("Time")%></span></li>
            </ItemTemplate>
            </asp:Repeater>
        </ul>
        <div class="page">
              <p><div class="pager"><%=PagerHtml%></div></p>

        </div>
    </div>

</asp:Content>

效果图:

这样仍然有一些问题:

为什么一定要后台处理呢?

为什么后台要做这些显示相关的?

后台只负责提供数据,而界面实现,完全应该由js解决......

因此,就有了现在这个版本....

上网研究了一下Jquery pager,然后在他的基础上,该改改,然后就有了现在这个版本,后台只负责提供数据(json格式)

前台负责界面显示

js分页:

   1:  //Download by http://www.codefans.net

   2:  //每次只显示5个页码

   3:  //修改:2012/4/26

   4:  //tianzhuanghu

   5:  //http://www.cnblogs.com/mysweet/ 我的博客

   6:  (function($) {

   7:      //设定页码方法，初始化

   8:      $.fn.setPager = function(options) {

   9:          var opts = $.extend({}, pagerDefaults, options);

  10:          return this.each(function() {

  11:          //修改,能够动态设置PageSize

  12:              pagerDefaults.PageSize=options.PageSize;

  13:              $(this).empty().append(setPagerHtml(parseInt(options.RecordCount), parseInt(options.PageIndex), options.buttonClick));

  14:               $('.pager a').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; });

  15:          });

  16:      };

  17:      //设定页数及html

  18:      function setPagerHtml(RecordCount, PageIndex, pagerClick) {

  19:              

  20:          var $content = $("<div class=\"pager\"></div>");

  21:          var startPageIndex = 1;

  22:          //若页码超出

  23:          if (RecordCount <= 0) RecordCount = pagerDefaults.PageSize;

  24:          var    PageSize=pagerDefaults.PageSize;

  25:          //alert(pagerDefaults.PageSize);

  26:          //末页

  27:          var endPageIndex = parseInt(RecordCount % parseInt(PageSize)) > 0 ? parseInt(RecordCount / parseInt(PageSize)) + 1 : RecordCount / parseInt(PageSize);

  28:   

  29:          if (PageIndex > endPageIndex) PageIndex = endPageIndex;

  30:          if (PageIndex <= 0) PageIndex = startPageIndex;

  31:          var nextPageIndex = PageIndex + 1;

  32:          var prevPageIndex = PageIndex - 1;

  33:          if (PageIndex == startPageIndex) {

  34:              $content.append($("<span>首页</span>"));

  35:              $content.append($("<span>上一页</span>"));

  36:          } else {

  37:   

  38:              $content.append(renderButton(RecordCount, 1, pagerClick, "首页"));

  39:              $content.append(renderButton(RecordCount, prevPageIndex, pagerClick, "上一页"));

  40:          }

  41:          //这里判断是否显示页码

  42:          if (pagerDefaults.ShowPageNumber) {

  43:              // var html = "";

  44:              //页码部分隐藏 只显示中间区域

  45:              if (endPageIndex <= 5 && PageIndex <= 5) {

  46:                  for (var i = 1; i <= endPageIndex; i++) {

  47:                      if (i == PageIndex) {

  48:                          $content.append($("<span>" + i + "</span>"));

  49:                      } else {

  50:                          $content.append(renderButton(RecordCount, i, pagerClick, i));

  51:                      }

  52:   

  53:                  }

  54:   

  55:              } else if (endPageIndex > 5 && endPageIndex - PageIndex <= 2) {

  56:   

  57:                  $content.append($("<a>...</a>"));

  58:                  for (var i = endPageIndex - 4; i <= endPageIndex; i++) {

  59:                      if (i == PageIndex) {

  60:                          $content.append($("<span>" + i + "</span>"));

  61:                      } else {

  62:                          $content.append(renderButton(RecordCount, i, pagerClick, i));

  63:                      }

  64:   

  65:                  }

  66:              } else if (endPageIndex > 5 && PageIndex > 3) {

  67:   

  68:                  $content.append($("<a>...</a>"));

  69:                  for (var i = PageIndex - 2; i <= PageIndex + 2; i++) {

  70:                      if (i == PageIndex) {

  71:                         $content.append($("<span>" + i + "</span>"));

  72:                      } else {

  73:                          $content.append(renderButton(RecordCount, i, pagerClick, i));

  74:                      }

  75:   

  76:                  }

  77:                 $content.append($("<a>...</a>"));

  78:   

  79:              } else if (endPageIndex > 5 && PageIndex <= 3) {

  80:   

  81:                  for (var i = 1; i <= 5; i++) {

  82:                      if (i == PageIndex) {

  83:                          $content.append($("<span>" + i + "</span>"));

  84:                      } else {

  85:                          $content.append(renderButton(RecordCount, i, pagerClick, i));

  86:                      }

  87:   

  88:                  }

  89:                 $content.append($("<a>...</a>"));

  90:              }

  91:          }

  92:          if (PageIndex == endPageIndex) {

  93:              $content.append($("<span>下一页</span>"));

  94:              $content.append($("<span>末页</span>"));

  95:          } else {

  96:              $content.append(renderButton(RecordCount, nextPageIndex, pagerClick, "下一页"));

  97:              $content.append(renderButton(RecordCount, endPageIndex, pagerClick, "末页"));

  98:          }

  99:   

 100:   

 101:          return $content;

 102:      }

 103:      function renderButton(recordCount, goPageIndex, EventHander, text) {

 104:          var $goto = $("<a title=\"第" + goPageIndex + "页\">" + text + "</a>\"");

 105:          $goto.click(function() {

 106:   

 107:              EventHander(recordCount, goPageIndex,pagerDefaults.PageSize);

 108:          });

 109:          return $goto;

 110:      }

 111:      var pagerDefaults = {

 112:          DefaultPageCount: 1,

 113:          DefaultPageIndex: 1,

 114:          PageSize:20,

 115:          ShowPageNumber: true //是否显示页码

 116:      };

 117:  })(jQuery);

前台页面显示:

<%@ Page Language="C#" MasterPageFile="~/InfoPage.master" AutoEventWireup="true"
    CodeFile="MasterList.aspx.cs" Inherits="Master_MasterList" Title="大师风采" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="../css/other.css" rel="stylesheet" type="text/css" />

    <script src="../Admin/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>

    <script src="../js/jquery-pager-1.0.js" type="text/javascript"></script>

    <link href="../css/pager.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(document).ready(function() {
            //加载PageSize和页码PageIndex
            GetData(1,1);
        });
        function InitPager(RecordCount, PageIndex,PageSize,Data) {
        $("#Pager").setPager({ RecordCount: RecordCount, PageIndex: PageIndex,PageSize:PageSize, buttonClick: PageClick });
            //页面数据填充
       $("#tBodyMaster").empty();
       $.each(Data,function(key,value){
          //图片回调(集中请求)
         var PicSrc="../Admin/FileManage/GetImg.ashx?method=GetMasterPic&type=medium&fileName="+Data[key].Picturepath;
            var item='<tr><td><a href="'+"#"+'"><img src="'+PicSrc+'" title="'+Data[key].Name+'" alt="'+Data[key].Name+'"/><br/>'+Data[key].Name+'</a></td>';
            item+='<td class="jianjie"><span>'+Data[key].Introduction+'</span></td>';
            item+='<td class="adress"><a href="'+"#"+'">'+Data[key].Name+'的主页</a></td></tr>';
       $("#tBodyMaster").append(item);
       });
        };
        PageClick = function(RecordCount,PageIndex,PageSize) {
             GetData(PageSize,PageIndex);
        };
        //sortField排序字段
       function GetData(PageSize,PageIndex){
       $.ajax({
       url:'../Admin/MasterManage/Data/MasterInfo.ashx?method=SearchMaster',
       //注意后台分页存储过程的PageIndex是从0开始的,所以这里要-1
       data:'sortField=Id&sortOrder=desc&pageIndex='+(PageIndex-1)+'&pageSize='+PageSize,
       success:function(text){
       var jsonData=$.parseJSON(text);
       InitPager(jsonData.total, PageIndex,PageSize,jsonData.data);
       }

       });
       }

    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div class="list">
        <div class="list_load">
            <h3>
                大师风采</h3>
            <span><a href="../Default.aspx">首页</a> > 大师风采</span>
        </div>
        <div class="ol">
            <table width="680" border="0" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th width="160">
                            大师名称
                        </th>
                        <th width="310">
                            大师简介
                        </th>
                        <th width="210">
                            大师个人网页
                        </th>
                    </tr>
                </thead>
                <tbody id="tBodyMaster">

                </tbody>
            </table>
        </div>
        <div id="Pager">
        </div>
    </div>
</asp:Content>

后台则负责数据的提供:

  /// <summary>
    /// 搜索调用
    /// </summary>
    /// <param name="context"></param>
    public void SearchMaster(HttpContext context)
    {
        //查询条件
        string key = context.Request["key"];
        //分页
        int pageIndex = Convert.ToInt32(context.Request["pageIndex"]);
        int pageSize = Convert.ToInt32(context.Request["pageSize"]);
        //字段排序
        String sortField = context.Request["sortField"];
        String sortOrder = context.Request["sortOrder"];
        string strCondition = "";
        //对搜索内容进行验证
        if (!Common.Tools.IsValidInput(ref key, false))
        {
            return;
        }
        else
            strCondition = masterBLL.ConfirmCondition(key);//判断查询条件
        masterBLL bll = new masterBLL();
        //分页数据读取
        IEnumerable<master> list = bll.ListByPagination(sortField, pageSize, pageIndex + 1, sortOrder == "asc" ? "1" : "0", strCondition);
        //获取总页数
        int totalPage = bll.GetCount(strCondition);
        //JSON 序列化
        string json = masterBLL.MiniUiListToJson(list, totalPage, "");


        context.Response.Write(json);
    }

BLL生成json方法:(这个方法我是代码生成器写成一个模板,然后每次自动生成,免得每次都要写,哈哈哈)

    /// <summary>
        /// 专门生成为MiniUi生成json数据(List->json)
        /// </summary>
        /// <typeparam name="T">泛型</typeparam>
        /// <param name="list">实现了Ilist接口的list</param>
        /// <param name="total">记录总数</param>
        /// <param name="paramMaxMin">这里放排序的参数例如,string para=""maxAge":37,"avgAge":27,"minAge":24"</param>
        /// <returns>返回json数据</returns>
        public static string MiniUiListToJson(IEnumerable<master> masterInfo, int total, string paramMaxMinAvg)
        {
            StringBuilder Json = new StringBuilder();
            Json.Append("{\"total\":"+total+",\"data\":");
            Json.Append("[");
                foreach (master Info in masterInfo)
                {
                    Json.Append("{");
                    Json.Append("\"Id\":\"" + Info.Id + "\"");
                    Json.Append(",");
                    Json.Append("\"Username\":\"" + Info.Username + "\"");
                    Json.Append(",");
                    Json.Append("\"Password\":\"" + Info.Password + "\"");
                    Json.Append(",");
                    Json.Append("\"Name\":\"" + Info.Name + "\"");
                    Json.Append(",");
                    Json.Append("\"Introduction\":\"" + Info.Introduction + "\"");
                    Json.Append(",");
                    Json.Append("\"Isrecommend\":\"" + Info.Isrecommend + "\"");
                    Json.Append(",");
                    Json.Append("\"Isshow\":\"" + Info.Isshow + "\"");
                    Json.Append(",");
                    Json.Append("\"Picturepath\":\"" + Info.Picturepath + "\"");
                    Json.Append(",");
                    Json.Append("\"Sex\":\"" + Info.Sex + "\"");
                    Json.Append(",");
                    Json.Append("\"Nation\":\"" + Info.Nation + "\"");
                    Json.Append(",");
                    Json.Append("\"mobilephone\":\"" + Info.mobilephone + "\"");
                    Json.Append(",");
                    Json.Append("\"Telephone\":\"" + Info.Telephone + "\"");
                    Json.Append(",");
                    Json.Append("\"Email\":\"" + Info.Email + "\"");
                    Json.Append(",");
                    Json.Append("\"QQ\":\"" + Info.QQ + "\"");
                    Json.Append(",");
                    Json.Append("\"Zipcode\":\"" + Info.Zipcode + "\"");
                    Json.Append(",");
                    Json.Append("\"Address\":\"" + Info.Address + "\"");
                    Json.Append(",");
                    Json.Append("\"appreciation\":\"" + Info.appreciation + "\"");
                    Json.Append(",");
                    Json.Append("\"website\":\"" + Info.website + "\"");
                    Json.Append(",");
                    Json.Append("\"Reward\":\"" + Info.Reward + "\"");
                    Json.Append(",");
                    Json.Append("\"BirthDay\":\"" + Info.BirthDay + "\"");
                    Json.Append(",");
                    Json.Append("\"state\":\"" + Info.state + "\"");
                    Json.Append(",");
                    Json.Append("\"state1\":\"" + Info.state1 + "\"");
                    Json.Append(",");
                    Json.Append("\"hit\":\"" + Info.hit + "\"");
                    Json.Append(",");
                    Json.Append("\"rank\":\"" + Info.rank + "\"");
                    Json.Append("}");
                    if(Info != masterInfo.Last())
                    {
                        Json.Append(",");
                    }
                }
            Json.Append("]}");
            return Json.ToString();
        }

存储过程:一直就用的上网找的,一个非常完美的存储过程:(感觉优化的很好,我做了多次封装,用起来非常方便):

USE [czcraft]
GO
/****** 对象:  StoredProcedure [dbo].[pagination]    脚本日期: 04/26/2012 21:04:21 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE [dbo].[pagination]
     @tblName varchar(255), -- 表名
     @innerJohn varchar(500),  --inner john连接的表
   --  @innerJohnCondition varchar(255),  --inner john连接条件
     @strGetFields varchar(1000) = '*', -- 需要返回的列
     @fldName varchar(255)='', -- 排序的字段名
     @PageSize int = 10, -- 页尺寸
     @PageIndex int = 1, -- 页码
     @doCount bit = 0, -- 返回记录总数, 非0 值则返回
     @OrderType bit = 0, -- 设置排序类型, 非0 值则降序
     @strWhere varchar(1500) = '' -- 查询条件(注意: 不要加where)
AS

declare @strSQL varchar(5000) -- 主语句
declare @strTmp varchar(110) -- 临时变量
declare @strOrder varchar(400) -- 排序类型

if @doCount != 0
     begin
         if @strWhere !=''
             set @strSQL = 'select count(*) as Total from [' + @tblName + '] '+@innerJohn +' where '+@strWhere
         else
             set @strSQL = 'select count(*) as Total from [' + @tblName + '] '+@innerJohn +' '
     end
     --以上代码的意思是如果@doCount传递过来的不是0，就执行总数统计。以下的所有代码都是@doCount为0的情况

else
     begin
         if @OrderType != 0
             begin
                 set @strTmp = '<(select min'
                 set @strOrder = ' order by [' + @fldName +'] desc'
                 --如果@OrderType不是0，就执行降序，这句很重要！
             end

         else
             begin
                 set @strTmp = '>(select max'
                 set @strOrder = ' order by [' + @fldName +'] asc'
             end
             if @PageIndex = 1
                 begin
                     if @strWhere != ''
                         set @strSQL = 'select top ' + str(@PageSize) +' '+@strGetFields+ ' from [' + @tblName + '] '+@innerJohn +' where ' + @strWhere + ' ' + @strOrder
                     else
                         set @strSQL = 'select top ' + str(@PageSize) +' '+@strGetFields+ ' from ['+ @tblName + '] '+@innerJohn + @strOrder
                         --如果是第一页就执行以上代码，这样会加快执行速度
                 end
             else
                 begin
                     --以下代码赋予了@strSQL以真正执行的SQL代码
                     set @strSQL = 'select top ' + str(@PageSize) +' '+@strGetFields+ ' from '
                         + @tblName + ' '+@innerJohn+ ' where [' + @fldName + ']' + @strTmp + '(['+ @fldName + ']) from (select top ' + str((@PageIndex-1)*@PageSize) + ' ['+ @fldName + '] from [' + @tblName + '] '+@innerJohn +' ' + @strOrder + ') as tblTmp)'+ @strOrder
                         if @strWhere != ''
                     set @strSQL = 'select top ' + str(@PageSize) +' '+@strGetFields+ ' from '
                         + @tblName + ' '+@innerJohn+ ' where [' + @fldName + ']' + @strTmp + '(['
                         + @fldName + ']) from (select top ' + str((@PageIndex-1)*@PageSize) + ' ['
                         + @fldName + '] from [' + @tblName + '] '+@innerJohn +'  where ' + @strWhere + ' '
                         + @strOrder + ') as tblTmp) and ' + @strWhere + ' ' + @strOrder
     end
end

print(@PageIndex)

exec (@strSQL)

现在的页面效果图:

是不是蛮不错的????

可能有人会问,为什么要做这么多工作?

可是试想想,如果要把这些列表页生成静态页面,那么,这个页面就非常容易生成了,这个ajax分页更好更完美,

如果用服务器控件,只要存在VIEWSTATE,生成静态页面就没辙了.

而且这么设计结构清晰,更以维护,分离也更彻底!