GridView实现分页的两种方法

前台设计:

 

<body>
    <form id="form1" runat="server">
    <div>
   
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConflictDetection="CompareAllValues"
            ConnectionString="<%$ ConnectionStrings:studentConnectionString %>"
            DeleteCommand="DELETE FROM [student] WHERE [sid] = @original_sid AND [sname] = @original_sname AND (([classid] = @original_classid) OR ([classid] IS NULL AND @original_classid IS NULL)) AND (([sex] = @original_sex) OR ([sex] IS NULL AND @original_sex IS NULL)) AND (([age] = @original_age) OR ([age] IS NULL AND @original_age IS NULL)) AND [isking] = @original_isking AND (([photo] = @original_photo) OR ([photo] IS NULL AND @original_photo IS NULL))"
            InsertCommand="INSERT INTO [student] ([sname], [classid], [sex], [age], [isking], [photo]) VALUES (@sname, @classid, @sex, @age, @isking, @photo)"
            OldValuesParameterFormatString="original_{0}"
            SelectCommand="SELECT * FROM [student]"
            UpdateCommand="UPDATE [student] SET [sname] = @sname, [classid] = @classid, [sex] = @sex, [age] = @age, [isking] = @isking, [photo] = @photo WHERE [sid] = @original_sid AND [sname] = @original_sname AND (([classid] = @original_classid) OR ([classid] IS NULL AND @original_classid IS NULL)) AND (([sex] = @original_sex) OR ([sex] IS NULL AND @original_sex IS NULL)) AND (([age] = @original_age) OR ([age] IS NULL AND @original_age IS NULL)) AND [isking] = @original_isking AND (([photo] = @original_photo) OR ([photo] IS NULL AND @original_photo IS NULL))">
            <DeleteParameters>
                <asp:Parameter Name="original_sid" Type="Int32" />
                <asp:Parameter Name="original_sname" Type="String" />
                <asp:Parameter Name="original_classid" Type="Int32" />
                <asp:Parameter Name="original_sex" Type="String" />
                <asp:Parameter Name="original_age" Type="Byte" />
                <asp:Parameter Name="original_isking" Type="Boolean" />
                <asp:Parameter Name="original_photo" Type="String" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="sname" Type="String" />
                <asp:Parameter Name="classid" Type="Int32" />
                <asp:Parameter Name="sex" Type="String" />
                <asp:Parameter Name="age" Type="Byte" />
                <asp:Parameter Name="isking" Type="Boolean" />
                <asp:Parameter Name="photo" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="sname" Type="String" />
                <asp:Parameter Name="classid" Type="Int32" />
                <asp:Parameter Name="sex" Type="String" />
                <asp:Parameter Name="age" Type="Byte" />
                <asp:Parameter Name="isking" Type="Boolean" />
                <asp:Parameter Name="photo" Type="String" />
                <asp:Parameter Name="original_sid" Type="Int32" />
                <asp:Parameter Name="original_sname" Type="String" />
                <asp:Parameter Name="original_classid" Type="Int32" />
                <asp:Parameter Name="original_sex" Type="String" />
                <asp:Parameter Name="original_age" Type="Byte" />
                <asp:Parameter Name="original_isking" Type="Boolean" />
                <asp:Parameter Name="original_photo" Type="String" />
            </UpdateParameters>
        </asp:SqlDataSource>
        <br />
        <br />
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True"
            PageSize="3" onpageindexchanging="GridView1_PageIndexChanging"
            onrowdatabound="GridView1_RowDataBound" ShowFooter="True">
            <PagerSettings FirstPageText="|&amp;lt;" LastPageText="&amp;gt;|"
                Mode="NextPreviousFirstLast" />
            <PagerTemplate>
                <asp:Button ID="Button1" runat="server" CommandArgument="First"
                    CommandName="page" Text="|&lt;" Width="30px" />
                &nbsp;<asp:Button ID="Button2" runat="server" CommandArgument="prev"
                    CommandName="page" Text="&lt;" Width="30px" />
                &nbsp;<asp:Button ID="Button3" runat="server" CommandArgument="next"
                    CommandName="page" Text="&gt;" Width="30px" />
                &nbsp;<asp:Button ID="Button4" runat="server" CommandArgument="last"
                    CommandName="page" Text="&gt;|" Width="30px" />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </PagerTemplate>
        </asp:GridView>
   
        <br />
        <br />
        <asp:GridView ID="GridView2" runat="server" AllowPaging="True"
            PageSize="3" onpageindexchanging="GridView1_PageIndexChanging"
            onrowdatabound="GridView1_RowDataBound" ShowFooter="True" Width="302px">
            <PagerSettings FirstPageText="|&amp;lt;" LastPageText="&amp;gt;|"
                Mode="NextPreviousFirstLast" Visible="False" />
            <PagerTemplate>
                <asp:Button ID="Button1" runat="server" CommandArgument="First"
                    CommandName="page" Text="|&lt;" Width="30px" />
                &nbsp;<asp:Button ID="Button2" runat="server" CommandArgument="prev"
                    CommandName="page" Text="&lt;" Width="30px" />
                &nbsp;<asp:Button ID="Button3" runat="server" CommandArgument="next"
                    CommandName="page" Text="&gt;" Width="30px" />
                &nbsp;<asp:Button ID="Button4" runat="server" CommandArgument="last"
                    CommandName="page" Text="&gt;|" Width="30px" />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </PagerTemplate>
        </asp:GridView>
   
        <br />
        <asp:Button ID="btnfirst" runat="server" οnclick="btnfirst_Click" Text="第一页" />
&nbsp;
        <asp:Button ID="btnPrev" runat="server" οnclick="btnPrev_Click" Text="上一页" />
&nbsp;
        <asp:Button ID="btnNext" runat="server" οnclick="btnNext_Click" Text="下一页" />
&nbsp;
        <asp:Button ID="btnLast" runat="server" οnclick="btnLast_Click" Text="最后一页" />
   
    </div>
    </form>
</body>

 

 

后台设计:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;


namespace _12_6内容
{
    public partial class Page1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindStudent();
            }
           
        }

        private void BindStudent()
        {
            string sql = "select * from student";
            DataTable dt = _11_28DataSet111.SqlHealper1.ExecuteDataTable(sql);
            this.GridView1.DataSource = dt;
            this.GridView1.DataBind();
            this.GridView2.DataSource = dt;
            this.GridView2.DataBind();
        }

        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.Pager)
            {
                (e.Row.Cells[0].FindControl("Label1") as Label).Text = "第"+(GridView1.PageIndex+1).ToString()+"页,共"+GridView1.PageCount+"页";
            }
        }

        protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
        {
            if (e.NewPageIndex >= 0)
            {
            this.GridView1.PageIndex = e.NewPageIndex;
            this.BindStudent();
            }
        }

        protected void btnfirst_Click(object sender, EventArgs e)
        {
            this.GridView2.PageIndex = 0;
            this.BindStudent();
        }

        protected void btnLast_Click(object sender, EventArgs e)
        {
            this.GridView2.PageIndex = this.GridView2.PageCount - 1;
            this.BindStudent();
        }

        protected void btnPrev_Click(object sender, EventArgs e)
        {
            int index = this.GridView2.PageIndex;
            if (index >= 1)
            {
                index--;
            }
            this.GridView2.PageIndex = index;
            this.BindStudent();
        }

        protected void btnNext_Click(object sender, EventArgs e)
        {
            int index = this.GridView2.PageIndex;
            if (index <this.GridView2.PageCount+1)
            {
                index++;
            }
            this.GridView2.PageIndex = index;
            this.BindStudent();
        }
    }
}

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
GridView是一个非常常用的ASP.NET控件,它可以方便地呈现数据,并且支持分页功能。在GridView中,可以使用内置的分页样式,也可以自定义分页样式。下面我将介绍两种自定义分页样式。 1. 自定义分页样式一:使用自定义模板 GridView提供了一个PagerTemplate属性,可以使用这个属性来自定义分页模板。下面是一个简单的例子: ```html <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnPageIndexChanging="GridView1_PageIndexChanging"> <Columns> <asp:BoundField DataField="ID" HeaderText="ID" /> <asp:BoundField DataField="Name" HeaderText="Name" /> <asp:BoundField DataField="Age" HeaderText="Age" /> </Columns> <PagerTemplate> <div class="pagination"> <span>共<%# GridView1.PageCount %>页,当前第<%# GridView1.PageIndex+1 %>页</span> <ul> <li><a href="#" onclick="javascript:__doPostBack('GridView1','Page', '<%= GridView1.PageIndex-1 %>')">上一页</a></li> <% for (int i = 0; i < GridView1.PageCount; i++) { %> <li <% if (GridView1.PageIndex == i) { %>class="active"<% } %>><a href="#" onclick="javascript:__doPostBack('GridView1','Page', '<%= i %>')"><%= i+1 %></a></li> <% } %> <li><a href="#" onclick="javascript:__doPostBack('GridView1','Page', '<%= GridView1.PageIndex+1 %>')">下一页</a></li> </ul> </div> </PagerTemplate> </asp:GridView> ``` 在这个例子中,我们使用PagerTemplate属性定义了一个分页模板。该模板包含一个div元素,用于包含分页控件。在div元素中,我们使用了一些HTML代码和ASP.NET表达式来生成分页控件。 在分页控件中,我们使用了一个ul元素和一些li元素来呈现页码。在每个li元素中,我们使用了一个a元素和一个onclick事件来触发GridView分页功能。在onclick事件中,我们使用了一个__doPostBack函数来向服务器发送分页请求,并且传递了两个参数:GridView的ID和分页索引。 2. 自定义分页样式二:使用第三方分页插件 除了使用自定义模板之外,我们还可以使用第三方分页插件来自定义GridView分页样式。下面是一个使用Bootstrap Paginator插件的例子: ```html <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnPageIndexChanging="GridView1_PageIndexChanging"> <Columns> <asp:BoundField DataField="ID" HeaderText="ID" /> <asp:BoundField DataField="Name" HeaderText="Name" /> <asp:BoundField DataField="Age" HeaderText="Age" /> </Columns> </asp:GridView> <div id="pagination"></div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-paginator/2.2.5/bootstrap-paginator.min.js"></script> <script> $(function () { $('#pagination').bootstrapPaginator({ currentPage: <%= GridView1.PageIndex+1 %>, totalPages: <%= GridView1.PageCount %>, onPageChanged: function (e, oldPage, newPage) { __doPostBack('GridView1', 'Page', newPage-1); } }); }); </script> ``` 在这个例子中,我们使用了Bootstrap Paginator插件来自定义分页样式。在页面加载完成之后,我们使用jQuery选择器选中了一个id为pagination的div元素,并且调用了bootstrapPaginator函数来初始化分页控件。在bootstrapPaginator函数中,我们传递了三个参数:当前页码、总页码数和一个回调函数。在回调函数中,我们使用__doPostBack函数向服务器发送分页请求,并且传递了两个参数:GridView的ID和分页索引。 这两种自定义分页样式都非常简单易懂,可以根据自己的需求进行选择和修改。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值