首页 > 布布扣 > 详细

GridView使用自带分页功能时分页方式及样式PagerStyle

时间:2014-10-16 13:28:38      阅读:14503      评论:0      收藏:0      [点我收藏+]

GridView分页,使用自带分页功能,类似下面样式:

bubuko.com,布布扣

在aspx页面中,GridView上的PagerStyle下CssClass属性,设置为bubufxPagerCss,具体aspx页面代码:

<asp:GridView ID="GridView1" runat="server" Width="100%" AutoGenerateColumns="False"
            AllowPaging="True" EmptyDataText="没有数据记录!!" OnPageIndexChanging="GridView1_PageIndexChanging"
            ShowHeader="False" GridLines="None">
            <Columns>
                <asp:BoundField DataField="ID" HeaderText="ID" />
                <asp:BoundField DataField="name" HeaderText="name" />
                <asp:BoundField DataField="card" HeaderText="card" />
                <asp:TemplateField ItemStyle-HorizontalAlign="right" ItemStyle-CssClass="list" ItemStyle-Width="100">
                    <ItemTemplate>
                        <%# Eval("ctime", "{0:yyyy-MM-dd}")%>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <PagerSettings FirstPageText="首页" LastPageText="末页" NextPageText="下一页" PageButtonCount="5"
                PreviousPageText="上一页" Mode="NumericFirstLast" />
            <PagerStyle BorderColor="#66FF66" Font-Names="宋体" Font-Size="12px" HorizontalAlign="Center"
                CssClass="bubufxPagerCss" />
        </asp:GridView>


aspx.cs代码:

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

using System.Data.OleDb;
using System.Data;

public partial class list : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            dataBind();
        }

    }


    private void dataBind()
    {
        string sql = "select * from tt ";

        try
        {
            DataTable DT = new DataTable();
            //
            string connStr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("db.mdb");

            OleDbConnection conn = new OleDbConnection(connStr);

            if (conn.State == ConnectionState.Closed) conn.Open();
            OleDbDataAdapter da = new OleDbDataAdapter(sql, conn);

            da.Fill(DT);
            conn.Close();
            //
            
            GridView1.DataSource = DT;
            GridView1.DataBind();
        }
        catch (Exception ex)
        {
            Response.Write("数据库错误,错误原因:" + ex.Message);
            Response.End();
        }
    }

    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GridView1.PageIndex = e.NewPageIndex;
        dataBind();

    }

}

css代码:

.bubufxPagerCss table
{
    text-align:center;
    margin:auto;
}
.bubufxPagerCss table td
{
    border:0px;
    padding:5px;
}
.bubufxPagerCss td
{
    border-left: #ffffff 3px solid;
    border-right: #ffffff 3px solid;
    border-bottom: #ffffff 3px solid;
}
.bubufxPagerCss a
{
    color:#231815;text-decoration:none;padding:3px 6px 3px 6px; margin: 0 0 0 4px; text-align:center; border:1px solid #ac1f24;
}
.bubufxPagerCss span
{
     color:#fefefe;background-color:#ac1f24; padding:3px 6px 3px 6px; margin: 0 0 0 4px; text-align:center; font-weight:bold; border:1px solid #ac1f24;
}

这样就实现自带分页的页码样式了。

GridView使用自带分页功能时分页方式及样式PagerStyle

(5)
(5)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!