Gridview的仅用CSS的Bootstrap分页

介绍

本文描述了使用bootstrap CSS的.table类的ASP.NET gridview的bootstrap分页实现。

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

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

CSS解决方案：修改Table类而不是分页

将bootstrap CSS放在标题上。

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

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

在其中为.table和嵌套表添加额外的CSS ，如下所示。这些属性取自.pagination CSS。（译者：以下是分页完整的自定义css，在自己的项目中新建一个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();

以下是输出：

注：asp.net项目只是一个举例，可考虑使用在你喜欢的地方，放飞一把自己~~~

原文地址：https://www.codeproject.com/Tips/1085031/Easy-Bootstrap-Pagination-for-ASP-NET-Gridview

ASP.NET Gridview的简单的Bootstrap分页

介绍

CSS解决方案：修改Table类而不是分页

猜你喜欢