修改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 ...
随机推荐
- Directshow 采集与FFDshow 冲突
在使用Directshow 进行视频采集的时候,发现与本地安装的一个ffdshow有冲突. 见下图: 经过测试发现dshow 在设置采集媒体类型的时候,如果设置RGB32就会崩溃,如果设置RGB24就 ...
- APP-7-百度地图移动轨迹
1.代码部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...
- js 提示框的实现---组件开发之(一)
自己做了一个简单的提示框,供自己使用,也可以供他人参考,看懂此文,是理解组件开发的入门 思路比较简单: 1.常规写法: 1.1. 创建一个构造函数 1.2. 给构造函数的原型对象添加show 和hid ...
- epoll_wait 时 POLLERR 与 POLLIN 同时返回的现象解析(转)
今天code review时,同事B对我代码中的poll()的处理做法提出了异议.于是做了些研究,还发现了一些好玩的故事. 异议的代码 我的代码是参考manpage写的,类似下面的做法.同事B说没有处 ...
- python实现排序算法一:快速排序
##快速排序算法##基本思想:分治法,将数组分为大于和小于该值的两部分数据,然后在两部分数据中进行递归排序,直到只有一个数据结束## step1: 取数组第一个元素为key值,设置两个变量,i = 0 ...
- 扩展C#与元编程
扩展C#与元编程 https://www.cnblogs.com/knat/p/4580393.html https://www.cnblogs.com/knat/p/4584023.html 扩展C ...
- Django中使用mysql数据库并使用原生sql语句操作
Django自身默认使用sqlite3这个轻量级的数据库,但是当我们开发网站时,sqlite3就没有mysql好,sqlite3适合一些手机上开发使用的数据库. 准备的软件mysql数据库,版本5.7 ...
- CSS 盒子大小
盒子的宽和高 盒子的大小通过宽和高来指定. 默认情况下,盒子的大小刚好容纳其中的内容. 两个属性设置盒子的宽和高 width 设置宽 height 设置高 示例: 1 2 3 4 5 6 7 8 9 ...
- nbtscan工具
这是一款用于扫描Windows网络上NetBIOS名字信息的程序.该程序对给出范围内的每一个地址发送NetBIOS状态查询,并且以易读的表格列出接收到的信息,对于每个响应的主机,NBTScan列出它的 ...
- 理解JVM2 栈内存,方法区,堆内存
堆,方法区,栈的关系 分配最大堆内存-Xmx32m class SimpleHeap(val id: Int){ fun show() = println("My id is $id&quo ...