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分页相关推荐

bootstrap分页css样式,修改bootstrap-table中的分页样式
使用bootstrap-table时,使用$("")选择器没办法选中下方的分页button按钮,可能跟它是动态生成的有关吧. 最终找到与之对应的js(bootstrap-table ...
bootstrap 分页_这五款超好用的Bootstrap扩展，让你的Web开发事半功倍
Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包.它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框 ...
使用Spring数据和Thymeleaf实现Bootstrap分页
Twitter Bootstrap具有非常好的分页UI ,在这里我将向您展示如何使用Spring Data Web分页功能和Thymeleaf条件评估功能来实现它. 引导程序中的标准分页受Rdio启 ...
Bootstrap分页
前面的话分页导航几乎在每个网站都可见,好的分页能给用户带来好的用户体验.本文将详细介绍Bootstrap分页概述在Bootstrap框架中提供了两种分页导航: ☑ 带页码的分页导航 ...
新瓶旧酒ASP.NET AJAX(1) - 简单地过一下每个控件（ScriptManager、ScriptManagerProxy
[索引页] [×××] 新瓶旧酒ASP.NET AJAX(1) - 简单地过一下每个控件(ScriptManager.ScriptManagerProxy.UpdatePanel. UpdatePro ...
Bootstrap 分页导航中的翻页组件
分页导航中的翻页一些简单的网站,比如博客或者杂志网站,希望用更少的标记和样式,来创建简单的"前一页"和"后一页"的翻页导航. Bootstrap中,只需为列表 ...
ASP.NET Core 中简单Session登录校验
ASP.NET Core 中简单Session登录校验:从Session的配置添加.到请求过滤.再到页面操作.推荐相关阅读:ASP.NET 会话状态概述 ASP.NET Cookie 概述 ASP ...
ASP.NET GridView控件常用功能
ASP.NET GridView控件常用功能一.分页显示二.排序数据三.实现全选和不全选四.对数据进行编辑操作五.删除数据六.高亮显示鼠标所在行七.设置数据显示格式八.单击控件某行按钮 ...
3.9 Bootstrap 分页
文章目录 Bootstrap 分页分页(Pagination) 默认的分页分页的状态分页的大小翻页(Pager) 默认的翻页对齐的链接翻页的状态分页 Bootstrap 分页本章将讲解 ...

ASP.NET Gridview的简单的Bootstrap分页

介绍

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

ASP.NET Gridview的简单的Bootstrap分页相关推荐

最新文章

热门文章