ASP.NET Gridview 分页器样式中的 C# Bootstrap 分页？
Posted
技术标签:
【中文标题】ASP.NET Gridview 分页器样式中的 C# Bootstrap 分页？【英文标题】：C# Bootstrap Pagination in ASP.NET Gridview pager style? 【发布时间】：2013-08-30 11:23:00 【问题描述】：我已经完成了使用 Bootstrap 3.0 的页眉、项目和页脚，但还没有完成 Pager
您能指导我如何在 ASP.NET Gridview 分页器样式中实现 Bootstrap 分页吗？
请帮忙！
附加信息:::
这是我迄今为止通过添加 CssClass 所做的。应用了 Bootstrap 样式的表格显示完美。
<div class="table-responsive">
<asp:GridView ID="grdSearchAgreement" runat="server" CssClass="table table-hover"
GridLines="None" AllowPaging="true" PageSize="2">
</asp:GridView>
</div>
这是从 ASP.NET GridView 生成的分页样式。是表结构tr td。
<tr>
<td colspan="7"><table>
<tr>
<td><span>1</span></td><td><a href="javascript:__doPostBack('ctl00$body$grdSearchAgreement','Page$2')">2</a></td><td><a href="javascript:__doPostBack('ctl00$body$grdSearchAgreement','Page$3')">3</a></td>
</tr>
</table></td>
</tr>
但请参考 Bootstrap 3.0 分页文档。该样式只能适用于 ul li。 https://getbootstrap.com/docs/3.3/components/#pagination
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
如何将gridview生成的tr td pager改成ul li??
【问题讨论】：
【参考方案1】：我知道这是旧的，但我发现了一些东西，它是一种 css 风格，简单容易快速
https://sufiawan.wordpress.com/2014/09/26/asp-net-use-bootstrap-pagination-on-gridview/
我希望它会在某个时候拯救某人。
更新：
*万一链接断开：
你添加 CSS
.pagination-ys
/*display: inline-block;*/
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
.pagination-ys table > tbody > tr > td
display: inline;
.pagination-ys table > tbody > tr > td > a,
.pagination-ys table > tbody > tr > td > span
position: relative;
float: left;
padding: 8px 12px;
line-height: 1.42857143;
text-decoration: none;
color: #dd4814;
background-color: #ffffff;
border: 1px solid #dddddd;
margin-left: -1px;
.pagination-ys table > tbody > tr > td > span
position: relative;
float: left;
padding: 8px 12px;
line-height: 1.42857143;
text-decoration: none;
margin-left: -1px;
z-index: 2;
color: #aea79f;
background-color: #f5f5f5;
border-color: #dddddd;
cursor: default;
.pagination-ys table > tbody > tr > td:first-child > a,
.pagination-ys table > tbody > tr > td:first-child > span
margin-left: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
.pagination-ys table > tbody > tr > td:last-child > a,
.pagination-ys table > tbody > tr > td:last-child > span
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
.pagination-ys table > tbody > tr > td > a:hover,
.pagination-ys table > tbody > tr > td > span:hover,
.pagination-ys table > tbody > tr > td > a:focus,
.pagination-ys table > tbody > tr > td > span:focus
color: #97310e;
background-color: #eeeeee;
border-color: #dddddd;
并且只在 grd 内部使用
<PagerStyle CssClass="pagination-ys" />
【讨论】：
太棒了。对于那些想要将寻呼机向右对齐的人，可以在他们的 css 中添加：.pagination-ys > td:first-child float: right; 【参考方案2】：
我的回答取自 iYazee6 之前的回答 这里的新功能是增强了分页的css布局，实现它然后显示结果。
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" CssClass="table table-striped table-hover" OnPageIndexChanging="GridView1_PageIndexChanging" PageSize="10">
<PagerStyle HorizontalAlign = "Center" CssClass = "GridPager" />
...
css代码：
.GridPager a,
.GridPager span
display: inline-block;
padding: 0px 9px;
margin-right: 4px;
border-radius: 3px;
border: solid 1px #c0c0c0;
background: #e9e9e9;
box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
font-size: .875em;
font-weight: bold;
text-decoration: none;
color: #717171;
text-shadow: 0px 1px 0px rgba(255,255,255, 1);
.GridPager a
background-color: #f5f5f5;
color: #969696;
border: 1px solid #969696;
.GridPager span
background: #616161;
box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
color: #f0f0f0;
text-shadow: 0px 0px 3px rgba(0,0,0, .5);
border: 1px solid #3AC0F2;
结果是：
【讨论】：
不错的一个！我选择了这个答案【参考方案3】：只需稍微自定义来自this question 的答案，您就有了支持任何 Twitter Bootstrap CSS 主题的漂亮 GridView 寻呼机。
GridView 模板：
<asp:GridView ... AllowPaging="true" PageSize="10">
...
<PagerStyle HorizontalAlign="Center" />
<PagerTemplate>
<ul class="pagination">
<asp:Repeater ID="Pager" ItemType="System.Int32" SelectMethod="GetPages" runat="server">
<ItemTemplate>
<li class='<%#((int)Item == this.GridView.PageIndex+1)? "active" : "" %>'>
<asp:LinkButton CommandName="Page" CommandArgument="<%# Item %>"
Text="<%# Item %>" runat="server" OnClick="PageIndexChanging" />
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</PagerTemplate>
</asp:GridView>
服务器端代码：
public IEnumerable<int> GetPages()
return Enumerable.Range(1, GridView.PageCount);
protected void PageIndexChanging(object sender, EventArgs e)
LinkButton pageLink = (LinkButton)sender;
GridView.PageIndex = Int32.Parse(pageLink.CommandArgument) - 1;
BindDataToGridView();
【讨论】：
这是我认为最简单的 我同意，最简单的答案且易于管理。【参考方案4】：您可以为 GridView 控件提供 PagerTemplate。 http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.pagertemplate.aspx
【讨论】：
请在您的答案中提供链接中的相关详细信息。如果这些网站发生变化或下降，你的答案对任何人来说都是无用的。【参考方案5】：Bootsrap 分页是静态的。您必须将其动态添加到gridview，以便根据gridview 中的记录数生成寻呼机元素。您需要编写一些 jquery 代码来使其动态化。最好的方法是使用大量可用的 jquery 插件中的一个，例如 Bootpag。
这里是how to use Bootstrap pagination in ASP.NET GridView的一个典型例子。
【讨论】：
请在您的答案中提供链接中的相关详细信息。如果这些网站发生变化或下降，你的答案对任何人来说都是无用的。【参考方案6】：iYazee6 的结果导致我的网格中出现显示问题。即使 html 是 colspan="6" 对于 6 列网格，它也只需要网格的第一列来保存寻呼机。我无法确定为什么。 GridPager css 的增强解决方案很棒。 我添加了更多的 css 来像 Bootstrap 一样使用它，即 GridPager-info 或 GridPager-Danger 或 GridPager-Success 以相应地更改颜色。
CSS 片段是：
/***** GridPager-Danger *****/
.GridPager-Danger a,
.GridPager-Danger span
border: solid 1px #C60C30;
background: #e9e9e9;
color: #717171;
.GridPager-Danger a
background-color: #f5f5f5;
color: #C60C30;
border: 1px solid #C60C30;
.GridPager-Danger a:hover
background-color: #C60C30;
color: #f5f5f5;
.GridPager-Danger span
background: #C60C30;
color: #f0f0f0;
/***** GridPager-Success *****/
.GridPager-Success a,
.GridPager-Success span
border: solid 1px #3c763d;
background: #eeffcc;
color: #717171;
.GridPager-Success a
background-color: #eeffcc;
color: #3c763d;
border: 1px solid #3c763d;
.GridPager-Success a:hover
background-color: #3c763d;
color: #f5f5f5;
.GridPager-Success span
background: #3c763d;
color: #f0f0f0;
您只需将此 css 与 GridPager css 一起复制到 GridPager.css 文件中，并将此代码添加到您的 html 中
<PagerStyle HorizontalAlign = "Center" CssClass="GridPager GridPager-Info" />
OR
<PagerStyle HorizontalAlign = "Center" CssClass="GridPager GridPager-Success" />
OR
<PagerStyle HorizontalAlign = "Center" CssClass="GridPager GridPager-Danger" />它可能对使用 Bootstrap 的人有所帮助
【讨论】：
【参考方案7】：以 Yusuf Setiawan 博客的 iYazee6 帖子为基础。
我拆分了 a:hover 和 span:hover 并增加了填充宽度以使其对鼠标悬停产生影响。原始内边距：8px 12px。还把字体加粗了。
.pagination-ys table > tbody > tr > td > a:hover,
.pagination-ys table > tbody > tr > td > span:hover
padding: 8px 16px;
color: #97310e;
font-weight: bold;
background-color: #eeeeee;
border-color: #dddddd;
【讨论】：
【参考方案8】：这适用于 bootstrap 4 rtl
添加 PagerStyle-CssClass="bs4-aspnet-pager"
/*bs4-aspnet-pager*/
.bs4-aspnet-pager a,
.bs4-aspnet-pager span
position: relative;
float: right;
padding: 6px 12px;
margin-right: -1px;
line-height: 1.42857143;
color: ##007bff;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
.bs4-aspnet-pager span
z-index: 3;
color: #fff;
cursor: default;
background-color: #007bff;
border-color: #007bff;
.bs4-aspnet-pager tr > td:first-child > a,
.bs4-aspnet-pager tr > td:first-child > span
margin-right: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
.bs4-aspnet-pager tr > td:last-child > a,
.bs4-aspnet-pager tr > td:last-child > span
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
.bs4-aspnet-pager a:hover,
.bs4-aspnet-pager span:hover,
.bs4-aspnet-pager a:focus,
.bs4-aspnet-pager span:focus
z-index: 2;
color: #23527c;
background-color: #eee;
border-color: #ddd;
.bs4-aspnet-pager td
padding: 0;
/*end bs4-aspnet-pager */
【讨论】：
【参考方案9】：HTML 标记由 ASP.Net GridView 组成。对于 GridView，我使用 AllowPaging 属性启用了分页，并且还指定了 OnPageIndexChanging 事件。
将 GridView 与 Northwind 数据库的 Customers 表中的记录绑定的代码。
为了设置 GridView Pager 的样式，您需要遵循以下内容。
接下来，您需要使用 PagerStyle-CssClass 属性将 Pager CSS Class 分配给页面，如下所示。
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
protected void Page_Load(object sender, EventArgs e)
if (!IsPostBack)
this.BindGrid();
private void BindGrid()
string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
using (SqlCommand cmd = new SqlCommand("SELECT * FROM Customers"))
using (SqlDataAdapter sda = new SqlDataAdapter())
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
sda.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
RowStyle-BackColor="#A1DCF2" AlternatingRowStyle-BackColor="White" AlternatingRowStyle-ForeColor="#000"
runat="server" AutoGenerateColumns="false" AllowPaging="true" OnPageIndexChanging="OnPageIndexChanging">
<Columns>
<asp:BoundField DataField="ContactName" HeaderText="Contact Name" ItemStyle-Width="150px" />
<asp:BoundField DataField="City" HeaderText="City" ItemStyle-Width="100px" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100px" />
</Columns>
<PagerStyle HorizontalAlign = "Right" CssClass = "GridPager" />
</asp:GridView>
<PagerStyle HorizontalAlign = "Right" CssClass = "GridPager" />
<style type="text/css">
body
font-family: Arial;
font-size: 10pt;
.GridPager a, .GridPager span
display: block;
height: 15px;
width: 15px;
font-weight: bold;
text-align: center;
text-decoration: none;
.GridPager a
background-color: #f5f5f5;
color: #969696;
border: 1px solid #969696;
.GridPager span
background-color: #A1DCF2;
color: #000;
border: 1px solid #3AC0F2;
</style>
【讨论】：
以上是关于ASP.NET Gridview 分页器样式中的 C# Bootstrap 分页？的主要内容，如果未能解决你的问题，请参考以下文章
ASP.NET：如何为 GridView 创建自定义分页器？
向导控件中的 Gridview 自定义分页在 asp.net 中无法正常工作
asp.net中GridView怎样进行分页，编辑，删除操作