介绍

本文描述了使用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放在标题上。

现在，我们需要在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中，如下：

现在，在代码视图的页面加载中将此代码添加到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项目只是一个举例，可考虑使用在你喜欢的地方，放飞一把自己~~~

原文地址：

转载地址：http://wyzhj.baihongyu.com/

你可能感兴趣的文章