适用于 ASP.NET Gridview 的简单 Bootstrap 分页

• 下载源代码 (RAR) - 455 B
• 下载源代码 (ZIP) - 478 B

引言

本文档描述了如何在 Bootstrap CSS 的 .table 类中为 ASP.NET gridview 实现 Bootstrap 分页。

我最近在使用 Bootstrap 模板中的 ASP.NET gridview。Bootstrap CSS 中的分页以 ul li 格式提供在 .pagination 类中。但是，ASP.NET gridview 控件动态地将分页放在一个嵌套的表格中。但仔细观察 gridview 分页的 HTML 标签后，我发现了一个简单的解决方案。

那就是修改我们在 gridview 中使用的 .table 类。Gridview 分页行位于表格内，而当前页码保存在 span 控件中，与其他页面链接不同。

CSS 解决方案：修改表格类，而非分页类

所以这就是技巧所在。

将 Bootstrap CSS 放在头部。

<link href="css/bootstrap.css" rel="stylesheet" />

现在，我们需要修改 gridview 中的分页器，为 .table 表格编写 CSS 规则 - 类似于 .pagination 类中的 ul li。

就像这样...

为 .table 及其内部的嵌套表格添加额外的 CSS，如下所示。这些属性取自 .pagination CSS。

/*gridview*/
.table table  tbody  tr  td a ,
.table table  tbody  tr  td  span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}

.table table > tbody > tr > td > span {
z-index: 3;
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}

.table table > tbody > tr > td:first-child > a,
.table table > tbody > tr > td:first-child > span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}

.table table > tbody > tr > td:last-child > a,
.table table > tbody > tr > td:last-child > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

.table table > tbody > tr > td > a:hover,
.table   table > tbody > tr > td > span:hover,
.table table > tbody > tr > td > a:focus,
.table table > tbody > tr > td > span:focus {
z-index: 2;
color: #23527c;
background-color: #eee;
border-color: #ddd;
}
/*end gridview */

您的 gridview 分页类已经准备就绪。

现在，将此类放在 gridview 中，如下所示

 <asp:GridView ID="GridView1" 
 CssClass="table table-striped table-bordered table-hover" 
	runat="server" PageSize="10" 
	AllowPaging="true" ></asp:GridView>

现在，在页面加载的代码视图中添加此代码以 databind gridview

 DataTable dt = new DataTable();
            dt.Columns.Add("Sl");
            dt.Columns.Add("data");
            dt.Columns.Add("heading1");
            dt.Columns.Add("heading2");
            for (int i = 0; i < 100; i++)
            {
                dt.Rows.Add(new object[] { i ,123*i, 4567*i , 2*i ,  });
            }
           
            GridView1.DataSource = dt;
            GridView1.DataBind();

以下是显示的输出