C# Bootstrap Paginacja w stylu pager ASP.NET Gridview?

Question

mam już zrobione z nagłówka, element, a stopki, ale nie za pomocą pagera Bootstrap 3.0

mógłbyś poprowadzić mnie jak zaimplementować Bootstrap paginacji w ASP.NET GridView stylu pager?

Proszę pomóc!

Dodatkowe informacje :::

Oto co zrobiłem do tej pory przez dodanie CssClass. Tabela jest idealna z zastosowanym stylem Bootstrap.

<div class="table-responsive"> 
     <asp:GridView ID="grdSearchAgreement" runat="server" CssClass="table table-hover" 
      GridLines="None" AllowPaging="true" PageSize="2"> 
     </asp:GridView> 
    </div> 

A oto styl stronicowania, który generowany z ASP.NET GridView. Jest to struktura tabeli 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> 

Ale odwołaj się do dokumentu paginacji Bootstrap 3.0. Styl może dotyczyć tylko 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> 

Jak mogę zmienić tr td pager, które generują z GridView na ul li ??

Answer 1

Wiem, że to stary, ale znalazłem coś, co jest styl CSS, prosty łatwy i szybki

https://sufiawan.wordpress.com/2014/09/26/asp-net-use-bootstrap-pagination-on-gridview/

Mam nadzieję, że ktoś kiedyś uratować.

---

zmiana:

* W przypadku, gdy połączenie jest w dół:

dodać 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; 
} 

I po prostu używać wewnątrz GRD

<PagerStyle CssClass="pagination-ys" /> 

Answer 2

Można zapewnić PagerTemplate dla kontrolki GridView. http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.pagertemplate.aspx

Answer 3

Pagowanie Bootsrap jest statyczne. Musisz zrobić to dynamicznie, aby dodać go do widoku siatki, aby elementy pagera były generowane zgodnie z liczbą rekordów w widoku siatki. Musisz napisać kod jquery, aby był dynamiczny. Najlepszym sposobem jest użycie jednego z wielu dostępnych wtyczek jquery, na przykład Bootpag.

Oto typowy przykład how to use Bootstrap pagination in ASP.NET GridView.

Answer 4

My odpowiedź pochodzi z poprzedniej odpowiedzi r przez iYazee6 nowością jest ulepszenie układu stronicowania, wdrożenie go, a następnie wyświetlenie wyniku.

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" CssClass="table table-striped table-hover" OnPageIndexChanging="GridView1_PageIndexChanging" PageSize="10"> 
    <PagerStyle HorizontalAlign = "Center" CssClass = "GridPager" /> 
... 

kod 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; 
} 

wynik jest:

Answer 5

wynik iYazee6 jest przyczyną problemu wyświetlania w moim siatki. Zajmuje tylko pierwszą kolumnę siatki, aby utrzymać pager, nawet jeśli html ma wartość colspan = "6" dla siatki o 6 kolumnach. Nie mogę określić, dlaczego. Ulepszone rozwiązanie programu css GridPager jest świetne. Dodałem trochę więcej css, aby użyć go jak Bootstrap, np. GridPager-info LUB GridPager-Danger LUB GridPager-Success, aby odpowiednio zmienić kolory.

CSS Fragment brzmi:

/***** 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; 
 
}

Wystarczy skopiować ten css wraz z GridPager css w pliku GridPager.css i dodać ten kod do html

<PagerStyle HorizontalAlign = "Center" CssClass="GridPager GridPager-Info" /> 
 

 
OR 
 

 
<PagerStyle HorizontalAlign = "Center" CssClass="GridPager GridPager-Success" /> 
 

 
OR 
 

 
<PagerStyle HorizontalAlign = "Center" CssClass="GridPager GridPager-Danger" />

Może to pomóc komuś przy użyciu Bootstrap