ASP.NET Gridview页面风格中的C＃Bootstrap分页

问题描述

我已经完成了Header，Item和Footer，但是没有使用Bootstrap 3.0的Pager

请你指导我如何在ASP.NET中实现Bootstrap分页GridView的pager风格？

请帮忙！

其他信息:::

以下是我通过添加CssClass完成的工作。

 < div class =table-responsive> 
< asp：GridView ID =grdSearchAgreementrunat =serverCssClass =table table-hover
 GridLines =NoneAllowPaging =truePageSize =2> 
< / asp：GridView> 
< / div> 
  

这里是从ASP.NET GridView生成的Paging样式。它是表结构tr td。

 < tr> 
< td colspan =7>< table> 
< tr> 
< td>< span> 1< / span>< / td>< td>< a href =javascript：__ doPostBack（＃39; ctl00 $ body $ grdSearchAgreement& 2< / a>< / td>< td>< a href =javascript：__ doPostBack（&＃39; ctl00 $ body $ grdSearchAgreement&安培;＃39;，&安培;＃39;页$ 3及＃39）→3< / A>< / TD> 
< / tr> 
< / table>< / td> 
< / tr> 
  

但请参阅Bootstrap 3.0分页文档。风格只适用于ul li。

 < ul class =pagination> 
< li>< a href =＃>& laquo;< / 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 =＃>& raquo;< / a>< / li> 
< / ul> 
  

我怎样才能改变生成从gridview到ul li的tr td pager？

解决方案

我知道这是旧的，但是我发现了一些东西，这是一种css风格，简单方便快捷

我希望能在某个时候节省人。

---

更新： b
$ b

：

您添加CSS

  .pagination-ys {
 / * display：inline-block; * / 
 padding-left：0; 
 margin：20px 0; 
 border-radius：4px; 
} 
 
 .pagination-ys表格> tbody> tr> td {
 display：inline; 
} 
 
 .pagination-ys表格> tbody> tr> td> a，
 .pagination-ys表格> tbody> tr> td> span {
 position：relative; 
 float：left; 
 padding：8px 12px; 
 line-height：1.42857143; 
 text-decoration：none; 
颜色：＃dd4814; 
 background-color：#ffffff; 
 border：1px solid #dddddd; 
 margin-left：-1px; 
} 
 
 .pagination-ys表格> tbody> tr> td> span {
 position：relative; 
 float：left; 
 padding：8px 12px; 
 line-height：1.42857143; 
 text-decoration：none; 
 margin-left：-1px; 
 z-index：2; 
颜色：＃aea79f; 
背景颜色：＃f5f5f5; 
 border-color：#dddddd; 
 cursor：default; 
} 
 
 .pagination-ys表格> tbody> tr> td：第一胎> a，
 .pagination-ys表格> tbody> tr> td：第一胎> span {
 margin-left：0; 
 border-bottom-left-radius：4px; 
 border-top-left-radius：4px; 
} 
 
 .pagination-ys表格> tbody> tr> td：last-child> a，
 .pagination-ys表格> tbody> tr> td：last-child> span {
 border-bottom-right-radius：4px; 
 border-right-right-radius：4px; 
} 
 
 .pagination-ys表格> tbody> tr> td> a：hover，
 .pagination-ys表格> tbody> tr> td> span：hover，
 .pagination-ys表格> tbody> tr> td> a：focus，
 .pagination-ys表格> tbody> tr> td>范围：焦点{
颜色：＃97310e; 
 background-color：#eeeeee; 
 border-color：#dddddd; 
} 
  

只需在grd中使用

 < PagerStyle CssClass =pagination-ys/> 
  

I'm already done with Header, Item, and Footer but not Pager using Bootstrap 3.0

Could you please guide me how to implement Bootstrap pagination in ASP.NET Gridview pager style?

Please help!

Additional information:::

Here is what I have done so far by adding CssClass. The table display perfect with Bootstrap style applied.

<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.

<tr>
        <td colspan="7"><table>
            <tr>
                <td><span>1</span></td><td><a href="javascript:__doPostBack(&#39;ctl00$body$grdSearchAgreement&#39;,&#39;Page$2&#39;)">2</a></td><td><a href="javascript:__doPostBack(&#39;ctl00$body$grdSearchAgreement&#39;,&#39;Page$3&#39;)">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

    <ul class="pagination">
  <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>

How can I change tr td pager that generate from gridview to ul li??

解决方案

I know this is old, But I found something, which is a css style, simple easy and fast

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

.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

<PagerStyle CssClass="pagination-ys" />

这篇关于ASP.NET Gridview页面风格中的C＃Bootstrap分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！