C# Bootstrap Pagination In ASP.NET Gridview Pager Style?

Answer :

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" /> 

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.

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

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

Just slightly customize answers from this question and you have nice GridView pager that support any Twitter Bootstrap CSS Theme.

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(); }