[英]C# Bootstrap Pagination in ASP.NET Gridview pager style?
我已經使用Bootstrap 3.0完成了頁眉,項目和頁腳的處理,但沒有完成分頁器的處理
您能否指導我如何以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?
我知道這很老了,但是我發現了一些東西,它是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" />
我的答案來自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;
}
結果是:
您可以為GridView控件提供PagerTemplate。 http://msdn.microsoft.com/zh-CN/library/system.web.ui.webcontrols.gridview.pagertemplate.aspx
Bootsrap分頁是靜態的。 您必須使其動態以將其添加到gridview中,以便根據gridview中的記錄數來生成分頁器元素。 您需要編寫一些jquery代碼以使其動態。 最好的方法是使用許多可用的jquery插件中的一個,例如Bootpag 。
這是一個如何在ASP.NET GridView中使用Bootstrap分頁的典型示例。
iYazee6的結果導致網格中的顯示問題。 即使html是6列網格的colspan =“ 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; }
您只需要在GridPager.css文件中復制此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的人
這將適用於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 */
建立在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;
}
只需對這個問題的答案進行些許自定義,您就會擁有不錯的GridView尋呼機,它支持任何Twitter Bootstrap CSS主題 。
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();
}
HTML標記由ASP.Net GridView組成。 對於GridView,我已使用AllowPaging屬性啟用了分頁,並且還已在OnPageIndexChanging事件中指定了分頁。
將GridView與羅斯文數據庫的“客戶”表中的記錄綁定的代碼。
為了給GridView Pager設置樣式,您需要遵循以下步驟。
接下來,您需要使用PagerStyle-CssClass屬性將Pager CSS類分配給頁面,如下所示。
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.