ASP.NET Gridview 分页器样式中的 C# Bootstrap 分页？答案

【问题标题】：C# Bootstrap Pagination in ASP.NET Gridview pager style?ASP.NET Gridview 分页器样式中的 C# Bootstrap 分页？
【发布时间】：2013-08-30 11:23:00
【问题描述】：

我已经完成了使用 Bootstrap 3.0 的页眉、项目和页脚，但还没有完成 Pager

您能指导我如何在 ASP.NET Gridview 分页器样式中实现 Bootstrap 分页吗？

请帮忙！

附加信息:::

这是我迄今为止通过添加 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 分页文档。该样式只能适用于 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>

如何将gridview生成的tr td pager改成ul li??

【问题讨论】：

标签： c# asp.net gridview pagination twitter-bootstrap-3

【解决方案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" />

【讨论】：

太棒了。对于那些想要将寻呼机向右对齐的人，可以在他们的 css 中添加：.pagination-ys > td:first-child { float: right; }

【解决方案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】：

只需稍微自定义来自this question 的答案，您就有了支持任何 Twitter Bootstrap CSS 主题的漂亮 GridView 寻呼机。

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

【讨论】：

这是我认为最简单的
我同意，最简单的答案且易于管理。

【解决方案4】：

您可以为 GridView 控件提供 PagerTemplate。 http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.pagertemplate.aspx

【讨论】：

请在您的答案中提供链接中的相关详细信息。如果这些网站发生变化或下降，你的答案对任何人来说都是无用的。

【解决方案5】：

Bootsrap 分页是静态的。您必须将其动态添加到gridview，以便根据gridview 中的记录数生成寻呼机元素。您需要编写一些 jquery 代码来使其动态化。最好的方法是使用大量可用的 jquery 插件中的一个，例如 Bootpag。

这里是how to use Bootstrap pagination in ASP.NET GridView的一个典型例子。

【讨论】：

请在您的答案中提供链接中的相关详细信息。如果这些网站发生变化或下降，你的答案对任何人来说都是无用的。

【解决方案6】：

iYazee6 的结果导致我的网格中出现显示问题。即使 html 是 colspan="6" 对于 6 列网格，它也只需要网格的第一列来保存寻呼机。我无法确定为什么。 GridPager css 的增强解决方案很棒。我添加了更多的 css 来像 Bootstrap 一样使用它，即 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;
}

您只需将此 css 与 GridPager css 一起复制到 GridPager.css 文件中，并将此代码添加到您的 html 中

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

OR

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

OR

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

它可能对使用 Bootstrap 的人有所帮助

【讨论】：

【解决方案7】：

以 Yusuf Setiawan 博客的 iYazee6 帖子为基础。

我拆分了 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】：

这适用于 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 */

【讨论】：

【解决方案9】：

HTML 标记由 ASP.Net GridView 组成。对于 GridView，我使用 AllowPaging 属性启用了分页，并且还指定了 OnPageIndexChanging 事件。

将 GridView 与 Northwind 数据库的 Customers 表中的记录绑定的代码。

为了设置 GridView Pager 的样式，您需要遵循以下内容。

接下来，您需要使用 PagerStyle-CssClass 属性将 Pager CSS Class 分配给页面，如下所示。

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.BindGrid();
    }
}

private void BindGrid()
{
    string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT * FROM Customers"))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                }
            }
        }
    }
}


<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
    RowStyle-BackColor="#A1DCF2" AlternatingRowStyle-BackColor="White" AlternatingRowStyle-ForeColor="#000"
    runat="server" AutoGenerateColumns="false" AllowPaging="true" OnPageIndexChanging="OnPageIndexChanging">
    <Columns>
        <asp:BoundField DataField="ContactName" HeaderText="Contact Name" ItemStyle-Width="150px" />
        <asp:BoundField DataField="City" HeaderText="City" ItemStyle-Width="100px" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100px" />
    </Columns>
    <PagerStyle HorizontalAlign = "Right" CssClass = "GridPager" />
</asp:GridView>
<PagerStyle HorizontalAlign = "Right" CssClass = "GridPager" />


<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    .GridPager a, .GridPager span
    {
        display: block;
        height: 15px;
        width: 15px;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
    }
    .GridPager a
    {
        background-color: #f5f5f5;
        color: #969696;
        border: 1px solid #969696;
    }
    .GridPager span
    {
        background-color: #A1DCF2;
        color: #000;
        border: 1px solid #3AC0F2;
    }
</style>

【讨论】：