ASP.NET Gridview 寻呼机样式中的 C# Bootstrap 分页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18470073/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
C# Bootstrap Pagination in ASP.NET Gridview pager style?
提问by Rabin Panichnok
I'm already done with Header, Item, and Footer but not Pager using Bootstrap 3.0
我已经使用 Bootstrap 3.0 完成了 Header、Item 和 Footer，但没有完成 Pager
Could you please guide me how to implement Bootstrap pagination in ASP.NET Gridview pager style?
你能指导我如何在 ASP.NET Gridview 分页器样式中实现 Bootstrap 分页吗？
Please help!
请帮忙！
Additional information:::
附加信息：：：
Here is what I have done so far by adding CssClass. The table display perfect with Bootstrap style applied.
这是我到目前为止通过添加 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>
And here is the Paging style that generated from ASP.NET GridView. It is table structure tr td.
这是从 ASP.NET GridView 生成的 Paging 样式。它是表结构tr td。
<tr>
<td colspan="7"><table>
<tr>
<td><span>1</span></td><td><a href="javascript:__doPostBack('ctl00$body$grdSearchAgreement','Page')">2</a></td><td><a href="javascript:__doPostBack('ctl00$body$grdSearchAgreement','Page')">3</a></td>
</tr>
</table></td>
</tr>
But refer to Bootstrap 3.0 Pagination Document. The style can only apply to ul li. https://getbootstrap.com/docs/3.3/components/#pagination
但请参考 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>
How can I change tr td pager that generate from gridview to ul li??
如何将从 gridview 生成的 tr td pager 更改为 ul li？
采纳答案by iYazee6
I know this is old, But I found something, which is a css style, simple easy and fast
我知道这是旧的，但我发现了一些东西，这是一种css样式，简单方便快捷
https://sufiawan.wordpress.com/2014/09/26/asp-net-use-bootstrap-pagination-on-gridview/
https://sufiawan.wordpress.com/2014/09/26/asp-net-use-bootstrap-pagination-on-gridview/
I hope it will save someone sometime.
我希望它会在某个时候拯救某人。
update:
更新：
*In case the link is down:
*如果链接失效：
You add the CSS
您添加 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;
}
And just use inside the grd
只需在 grd 内使用
<PagerStyle CssClass="pagination-ys" />
回答by Andrey M.
You can provide PagerTemplate for GridView control. http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.pagertemplate.aspx
您可以为 GridView 控件提供 PagerTemplate。http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.pagertemplate.aspx
回答by Priya
Bootsrap Pagination is static. You have to make it dynamic to add it to a gridview so that pager elements are generated according to the number of records in gridview. You need to write some jquery code to make it dynamic. Best way is to use one from the lot of jquery plugins available, for example Bootpag.
Bootsrap 分页是静态的。您必须使其动态添加到gridview，以便根据gridview中的记录数生成pager元素。您需要编写一些 jquery 代码以使其动态化。最好的方法是使用大量可用的 jquery 插件中的一个，例如Bootpag。
Here is a typical example of how to use Bootstrap pagination in ASP.NET GridView.
回答by Eng. Samer T
My answer is taken from previous answer by iYazee6 what's new here is enhancing css layout of pagination, implement it then display the result.
我的回答取自 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 code:
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;
}
the result is:
结果是：
回答by Chaudhary Kaleem Ahmad
iYazee6 's result causing display issue in my grid. It's taking only first column of the grid to hold pager even the html is colspan="6" for a 6 column grid. I can't determine why. Enhanced solution of GridPager css is great. I have added some more css to use it like Bootstrap i.e. GridPager-info OR GridPager-Danger OR GridPager-Success to change the colors accordingly.
iYazee6 的结果在我的网格中导致显示问题。它只需要网格的第一列来保存寻呼机，即使 html 是 colspan="6" 对于 6 列网格。我无法确定为什么。GridPager css 的增强解决方案很棒。我添加了更多的 css 来使用它，比如 Bootstrap，即 GridPager-info OR GridPager-Danger OR GridPager-Success 来相应地更改颜色。
CSS Snippet is:
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;
}You just need to copy this css along with GridPager css in GridPager.css file and add this code into your html
您只需要将此 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" />It might help someone using Bootstrap
它可能对使用 Bootstrap 的人有所帮助
回答by ???? ????? ???? ??????
this will work for bootstrap 4 rtl
这将适用于 bootstrap 4 rtl
add PagerStyle-CssClass="bs4-aspnet-pager"
添加 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 */
回答by Chris Catignani
Building on iYazee6 post above from Yusuf Setiawan's Blog.
以上面来自 Yusuf Setiawan 博客的 iYazee6 帖子为基础。
I split out the a:hover and span:hover and increased the padding width to give it an effect on mouse over. The original padding: 8px 12px. Also made the font bold.
我拆分了 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;
}
回答by Vladislav
Just slightly customize answers from this questionand you have nice GridView pager that support any Twitter Bootstrap CSS Theme.
只需稍微自定义此问题的答案，您就拥有了支持任何 Twitter Bootstrap CSS 主题的出色 GridView 寻呼机。
GridView template:
网格视图模板：
<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>
Server-side code:
服务端代码：
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();
}
回答by Fezal halai
The HTML Markup consists of an ASP.Net GridView. For the GridView I have enabled paging using the AllowPaging property and I have also specified on the OnPageIndexChanging event.
HTML 标记由一个 ASP.Net GridView 组成。对于 GridView，我使用 AllowPaging 属性启用了分页，并且还指定了 OnPageIndexChanging 事件。
The code to bind the GridView with records from the Customers table of the Northwind database.
将 GridView 与 Northwind 数据库的客户表中的记录绑定的代码。
In order to style the GridView Pager you need to follow the following.
为了设置 GridView Pager 的样式，您需要遵循以下步骤。
Next you need to assign the Pager CSS Class to the Page using the PagerStyle-CssClass property as shown below.
接下来，您需要使用 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>
