首页 > 代码库 > Web开发之分页技术
Web开发之分页技术
熟悉Web开发的小伙伴们都知道分页这个玩意儿,但是不会编程的小伙伴们对这个也绝对不陌生,只是不知道这是在Web开发中的一个非常重要的需求和技术罢了.
大家在浏览网上的文章或者图片的时候,经常会看到如下所示的页码显示效果:
这就是所谓的分页技术.为什么要进行分页呢?
很简单内容过多,会使我们的网页过长,我们在浏览网页的时候,不得不一直拖着滚动条或者一直去转鼠标的滚轮,才能看到全部的内容,转一圈、两圈、三圈，你觉得没什么，但是一直这么转下去，相信你会觉得非常的不爽，如此一来，为了获得更好的用户体验，就引入了分页技术。
分页技术又分为了假分页和真分页两种实现方法。
假分页：就是一次性将数据库中的数据全部取出来，然后在Web前端页面写代码，再进行分页显示，简单来说，先取出，再分页。下面我用ASP.NET控件GridView的分页属性AllowPaging和PageSize两个属性来实现一下假分页。代码实例如下：
添加一个测试ASP页面，然后将数据库中news表的内容全部显示在GridView中，如下图:
接下来我们来对显示内容进行分页处理，首先我们在GridView控件的属性列表中进行相关的设置，如下图：
然后我们在页面及其页面代码中写如下语句：
<span style="font-size:18px;"><body>
<form id="form1"runat="server">
<asp:GridViewID="GridView1" runat="server" AllowPaging="True"Height="316px" PageSize="5" Width="469px"OnPageIndexChanging="GridView1_PageIndexChanging">
</asp:GridView>
</form>
</body></span>页面对应的代码文件如下：
<span style="font-size:18px;">namespace Web
{
public partial class test :System.Web.UI.Page
{
protected void Page_Load(object sender,EventArgs e)
{
if (!Page.IsPostBack)
{
BindNews();
}
}
//绑定新闻
private void BindNews()
{
GridView1.DataSource = newNewsManager().SelectAll();
GridView1.DataBind();
}
//对GridView控件进行分页控制
protected voidGridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex =e.NewPageIndex;
BindNews();
}
}
}</span>完事以后的运行结果如下：
这种方法只适用于数据记录较少的情况下，如果我们要做搜索引擎，对于搜索结果来说，都是在千万级别甚至是上亿条的数据量，你要采用假分页技术的话，那程序执行的速度以及数据的传输速度，慢到令人发指，有什么办法能够解决这个海量数据分页显示的问题呢？这时候，真分页技术出现了。
真分页：就是在数据库中只选择当前页面请求的那些记录，通俗来讲，就是先分页，后显示，也就是当前页面请求10-20条记录，那么我们就从数据库中获取相应的10-20条的记录，不会全部取出来所有的数据了，这样一来，速度会很快的。
关于真分页的例子，我在这里也做一个。这里我们需要用到一个分页控件——ASPNetPager控件。大家可以在网上找到这个控件，自己添加到VS中，这里我就不作说明了，我们直接开始使用。
同样对news表进行真分页显示实现，新建一个ASP页面，添加一个GridView控件和一个AspNetPager控件，对后者进行一些属性的设置，比如每页显示多少了等待，设置完毕后页面文件代码如下：
<span style="font-size:18px;"><body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" BackColor="#CCFFFF" Height="160px" Width="800px"></asp:GridView>
<webdiyer:AspNetPager ID="anp" runat="server" FirstPageText="第一页" LastPageText="最后一页" NextPageText="下一页" NumericButtonCount="5" OnPageChanged="anp_PageChanged" PageSize="5" PrevPageText="上一页" BackColor="#99FF99" ForeColor="Blue" Width="800px">
</webdiyer:AspNetPager>
</form>
</body></span>其页面对应的代码文件如下：
<span style="font-size:18px;">namespace Web
{
public partial class test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{ //初次加载页面的显示设置
anp.RecordCount = 30;
GridView1.DataSource = new NewsManager().SelectNewsByPage(anp.StartRecordIndex, anp.EndRecordIndex);
GridView1.DataBind();
}
}
//当AspNetPager控件的页码改变时触发的事件
protected void anp_PageChanged(object sender, EventArgs e)
{
//Response.Write("开始记录数："+ anp.StartRecordIndex+ " <br>结束记录数：" + anp .EndRecordIndex );
GridView1.DataSource = new NewsManager().SelectNewsByPage(anp.StartRecordIndex, anp.EndRecordIndex);
GridView1.DataBind();
}
}
}</span>最后需要给出的是DAL层的分页显示的查询函数，这个蛮重要的，如下所示：
<span style="font-size:18px;"> /// <summary>
/// 采用真分页技术实现分页显示新闻
/// </summary>
/// <param name="startindex">页面开始的行号</param>
/// <param name="endindex">页面截止的行号</param>
/// <returns></returns>
public DataTable SelectNewsByPage(int startindex,int endindex)
{
DataTable dt = new DataTable();
string procName = "with temptb1 as (select ROW_NUMBER () over (order by id desc )as 行号,* from news) select * from temptb1 where 行号 between @startIndex and @endIndex";
SqlParameter[] paras = new SqlParameter[]{
new SqlParameter ("@startIndex",startindex),
new SqlParameter ("@endIndex",endindex )
};
dt = sqlhelper.ExecuteQuery(procName, paras, CommandType.Text );
return dt;
}</span>最后我们来看运行的结果如何：
小结：分页技术在Web应用开发中十分常见，只要我们与数据库打交道，就免不了使用分页技术，因此这个对Web开发人员来说就是一个必备技能。当然了上面只是说明了两个简单的方法实现分页显示，分页技术的实现的方法有很多很多，大家感兴趣的话可以去查阅资料，了解一下。
Web开发之分页技术