С# Bootstrap Pagination в стиле ASP.NET Gridview?

Я уже сделал это с заголовком, элементом и нижним колонтитулом, но не с пейджером, использующим Bootstrap 3.0

Не могли бы вы посоветовать мне, как реализовать разбиение страницы Bootstrap в стиле пейджеров ASP.NET Gridview?

Пожалуйста помоги!

Дополнительная информация:

Вот что я сделал до сих пор, добавив 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(&#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>

Но обратитесь к документу Bootstrap 3.0 Pagination Document. Стиль может применяться только к 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>

Как я могу изменить tr td пейджер, который генерирует из gridview в ul li??

Ответы

Ответ 1

Я знаю, что это старый, но я нашел что-то, что является стилем 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" />

Ответ 2

Мой ответ взят из предыдущего ответа 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;
}

результат:

Ответ 3

Вы можете предоставить PagerTemplate для управления GridView. http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.pagertemplate.aspx

Ответ 4

Bootsrap Pagination статична. Вы должны сделать его динамическим, чтобы добавить его в gridview, чтобы элементы пейджера генерировались в соответствии с количеством записей в gridview. Вам нужно написать некоторый код jquery, чтобы сделать его динамическим. Лучший способ - использовать один из множества доступных jQuery-плагинов, например Bootpag.

Вот типичный пример как использовать разбиение страницы Bootstrap в ASP.NET GridView.

Ответ 5

Результат iYazee6 вызывает проблему отображения в моей сетке. Он берет только первый столбец сетки для хранения пейджера, даже html - colspan = "6" для сетки с шестью столбцами. Я не могу определить, почему. Улучшенное решение GridPager css отлично. Я добавил еще несколько css, чтобы использовать его как Bootstrap i.e. 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;
}

Ответ 6

это будет работать для 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 */

Ответ 7

Основываясь на сообщении iYazee6 выше из блога Yusuf Setiawan.

Я разделил 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;
    }

Ответ 8

Просто немного настройте ответы на этот вопрос, и у вас есть приятный пейджер GridView, который поддерживает любую тему CSS Bootstrap Twitter.

Шаблон 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();
}