分页GridView自定义分页样式

http://kb.cnblogs.com/a/1340057/

一些静态网页上的分页样式很漂亮

比如

平时在.net中也有用到分页但没有注意到这些细节这两天有空一个朋友也问我这个问题顺便做了一个小DEMO出来 以方便自己以后用如果能帮到你那最好不过了效果

呵呵 gridview样式丑了点啊

前台代码

<%@Page Language="C#"AutoEventWireup="true"

CodeBehind="Defau lt.aspx.cs" Inherits="GridView自定义分页._Default"%><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>GridView自定义分页利用自定义来完成关键是样式表的写法</title>

<l ink rel="stylesheet" type="text/css" href="css.css"media="al l"/></head>

<body>

<form id="form1" runat="serve r">

<div class="mycss">/*这里给div加样式就行*/

<asp:GridView ID="GridView1" runat="server" PageSize="2"

Al lowPaging="True"onpageindexchanging="GridView1_PageIndexChanging"onselectedindexchanged="GridView1_SelectedIndexChanged">

<PagerSettings FirstPageText="首页" LastPageText="末页"

NextPageText="下一页" PageButtonCount="5" PreviousPageText="上一页"/>

<PagerStyle BorderColor="#66FF66" Font-Names="宋体"

Font-Size="12px"/>

</asp:GridView>

</d iv>

</form>

</body>

</html>

后台代码using System;using System.Col lections;using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;

using System.Xml .Linq;using System.Data.OleDb;namespace GridView自定义分页

{publ ic partial class_Default : System.Web.UI.Page

{protected void Page_Load(object sender, EventArgs e)

{if (!Page.IsPostBack)

{this.InitGridView();

}

}private DataSet GetAl lUser(string sqlTest)

{string conStr="Provider=Microsoft.Jet.OLEDB.4.0;DataSource=E:\\Test\\GridView自定义分页http://www.cnblogs.com/l iuwm5000/admin/fi le://gridview/自定义分页http://www.cnblogs.com/l iuwm5000/admin/fi le://db//DB.mdb";

DataSet ds=new DataSet();

OleDbConnection con=new OleDbConnection(conStr);con.Open();

OleDbCommand com=new OleDbCommand(sqlTest, con);

OleDbDataAdapter ad =new OleDbDataAdapter(com);ad.Fi l l(ds);return ds;

}private void InitGridView()

{string sqlTest="select *from[user]order by UserId";this.GridView1.DataSource=this.GetAl lUser(sqlTest);this.GridView1.DataBind();

}protected void GridView1_PageIndexChanging(object sender,GridViewPageEventArgs e)

{

GridView1.PageIndex=e.NewPageIndex;this.InitGridView();

}protected void GridView1_SelectedIndexChanged(object sender,EventArgs e)

{

}

}

}

关键的东西在这--样式表下面是样式表里的内容

.mycss table tr td span

{

BORDER-RIGHT: #000099 1px sol id; PADDING-RIGHT: 5px;BORDER-TOP:#000099 1px sol id; PADDING-LEFT: 5px; FONT-WEIGHT: bold;PADDING-BOTTOM: 2px;MARGIN: 2px; BORDER-LEFT:#000099 1px sol id;COLOR:#fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px sol id;BACKGROUND-COLOR:#000099

}

.mycss table tr td

{

PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px;MARGIN: 3px; PADDING-TOP: 3px;TEXT-ALIGN: center

}div.mycss table tr td a

{

BORDER-RIGHT: #aaaadd 1px sol id; PADDING-RIGHT: 5px;

BORDER-TOP:#aaaadd 1px sol id; PADDING-LEFT: 5px; PADDING-BOTTOM:2px;MARGIN: 2px; BORDER-LEFT:#aaaadd 1px sol id;COLOR:#000099;

PADDING-TOP: 2px; BORDER-BOTTOM:#aaaadd 1px sol id;

TEXT-DECORATION: none

}div.mycss table tr td A:hover{

BORDER-RIGHT: #000099 1px sol id; BORDER-TOP:#000099 1px sol id;BORDER-LEFT:#000099 1px sol id;COLOR:#000; BORDER-BOTTOM:#000099 1px sol id

}div.mycss table tr td A:active{

BORDER-RIGHT: #000099 1px sol id; BORDER-TOP:#000099 1px sol id;BORDER-LEFT:#000099 1px sol id;COLOR:#000; BORDER-BOTTOM:#000099 1px sol id

}

到这里就写完了要想改样式就改样式表里的内容就行了网上搜你喜欢的样式想怎么改就怎么改吧 