修改bootstrap-table中的分页样式
使用bootstrap-table时,使用$("")选择器没办法选中下方的分页button按钮,可能跟它是动态生成的有关吧。
最终找到与之对应的js(bootstrap-table.js中搜索了data-toggle),将class类更换成自己定义的一个class,完成了期望的效果

var pageNumber = [Utils.sprintf('<span class="btn-group %s">', this.options.paginationVAlign === 'top' || this.options.paginationVAlign === 'both' ? 'dropdown' : 'dropup'), '<button type="button" class="btn myPageStyle' + Utils.sprintf(' btn-%s', this.options.iconSize) + ' dropdown-toggle" data-toggle="dropdown">', '<span class="page-size">', $allSelected ? this.options.formatAllRows() : this.options.pageSize, '</span>', ' <span class="caret"></span>', '</button>', bootstrap.html.pageDropdown[0]];
/*修改了分页的样式*/
.myPageStyle {
background-color: #fff;
border: 1px solid #cabbbb;
padding: 3px 10px;
}
右侧页码部分引用的bootstrap中的page-link样式,只需要在此基础上,在自己的css文件夹中定义需要的样式即可
//修改bootstrap的page-link默认样式
.page-link {
color: #666 !important;
}
.active .page-link {
color: #fff !important;
}
修改bootstrap-table中的分页样式的更多相关文章
- bootstrap Table 中给某一特定值设置table选中
bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...
- 如何去掉bootstrap table中表格样式中横线竖线
修改之前,表格看上去比较拥挤,因为bootstrap table插件中自带斑马线表格样式,有横线和竖线分栏,现在我们不需要这些. 应UI设计的要求,要去掉中间的横线和竖线,使用了修改需求中一种简单粗暴 ...
- bootstrap table 前后端分页(超级简单)
前端分页:数据库查询所有的数据,在前端进行分页 后端分页:每次只查询当前页面加载所需要的那几条数据 下载bootstrap 下载bootstrap table jquery谁都有,不说了 项目结构:T ...
- BootStrap table服务端分页
涉及到的内容: 1.bootstrap-table插件: 2.mybatisplus分页查询: 3.spring封装对象匹配bootstrap-table插件格式: 4.sql查询隐藏手机号中间四位. ...
- Bootstrap Table 中文文档(完整翻译版)
表格参数: 名称 标签 类型 默认 描述 - data-toggle String ‘table’ 不用写 JavaScript 直接启用表格. classes data-classes String ...
- 关于bootstrap table的server分页
首先是bootstrap初始化的表格参数: // 初始化Table oTableInit.Init = function() { $('#booksTable').bootstrapTable({ u ...
- 修改LibreOffice Draw中定义的样式名称
目前我使用的是LibreOffice 4.2.4.2.经过以往的测试和使用经验,这是诸多版本中较为稳定和bug相对较少的.今天无意中发现该版本的LibreOffice Draw存在一个问题:样式名称修 ...
- vue修改富文本中的元素样式
富文本编辑器目前应用很广泛,而有时候我们想要对其中的一些元素的样式进行修改,就会遇到问题. 首先,直接修改是不可行的,因为是用v-html标签进行渲染的,无法直接获取到. 在修改的时候,一般是按标签进 ...
- 修改input标签中的placeholder样式
input::-webkit-input-placeholder { color: #fff !important; } input:-moz-placeholder { color: #fff !i ...
随机推荐
- 小柒2012 / spring-boot-quartz
spring-boot-quartz 基于spring-boot+quartz的CRUD动态任务管理系统,适用于中小项目. 基于spring-boot 2.x +quartz 的CRUD任务管理系统: ...
- 企业微信二次开发之-如何获取secret序列号
第一步:登录JEEWX后台,配置微信企业号账号信息(企业号.企业号应用) [1].配置企业微信信息 参数对应位置参考如下: [2].配置应用信息 必须四字段: 第二步: 登录企业微信后台,配置企业号应 ...
- 我要带徒弟学写JAVA架构,引路架构师之路(Jeecg开源社区)
带徒弟学JAVA架构(Jeecg社区) Java程序员如何打破工作2,3年的瓶颈问题,如何更上一层楼? 太多的巧合,让我接触到了开源,通过JEECG与很多朋友交流后,让我有了帮助别 ...
- javascript_ajax 地址三级联动
1.三级地址联动思路如下: 2.建立数据库.这里直接使用网上的地址数库,最后一个字段无用,先不去管它 3.建立一个server.php 文件 <?php // 数据库连接 mysql_conne ...
- javascript:width,innerwidth和outerwidth的区别
width()方法用于获得元素宽度 innerWidth()方法用于获得包括内边界(padding)的元素宽 outerWidth()方法用于获得包括内边界(padding)和边框(border)的元 ...
- 尚硅谷redis学习8-事务
是什么? 能干嘛? 常用命令 案例说明 1.正常执行 2.放弃事务 3.全部放弃(全体连坐) 4.只抛弃错误(冤头债主) 5.watch监控 悲观锁 悲观锁(Pessimistic Lock), 顾名 ...
- java-部分精选面试题
JVM的类加载机制是什么?有哪些实现方式? 类加载机制: 类的加载指的是将类的.class文件中的二进制数据读入到内存中,将其放在运行时数据区的方法去内,然后在堆区创建一个java.lang.Clas ...
- 如何使用JBDC修改数据
1.JDBC取得数据库Connection连接对象conn, Connection conn=null; //数据库连接对象 String strSql=null; //sql语句对象 // ...
- 22.struts2-拦截器.md
目录 1.执行的流程时序图 1.执行的流程时序图 回顾: Struts配置: * 通配符.动态方法调用 * 全局跳转配置.配置的默认值.常量配置 * Struts核心业务 * 请求数据的自动封装 (p ...
- Angular2 web project UltraRacing (一,如何启动一个Angular项目?)
要稍等一会 切到目录看看 OK,生成很多文件 那么 我们来启动吧 出现下面信息说明成功 而且每次我们编译文件后 都会在cmd里面显示这个信息 说明他是热部署的 然后我们去浏览器看看 说明一切OK!