C# Bootstrap Pagination in ASP.NET Gridview pager style? C# Bootstrap Pagination in ASP.NET Gridview pager style? asp.net asp.net

C# Bootstrap Pagination in ASP.NET Gridview pager style?


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

enter image description here


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

enter image description here