使用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中的分页样式的更多相关文章

  1. bootstrap Table 中给某一特定值设置table选中

    bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...

  2. 如何去掉bootstrap table中表格样式中横线竖线

    修改之前,表格看上去比较拥挤,因为bootstrap table插件中自带斑马线表格样式,有横线和竖线分栏,现在我们不需要这些. 应UI设计的要求,要去掉中间的横线和竖线,使用了修改需求中一种简单粗暴 ...

  3. bootstrap table 前后端分页(超级简单)

    前端分页:数据库查询所有的数据,在前端进行分页 后端分页:每次只查询当前页面加载所需要的那几条数据 下载bootstrap 下载bootstrap table jquery谁都有,不说了 项目结构:T ...

  4. BootStrap table服务端分页

    涉及到的内容: 1.bootstrap-table插件: 2.mybatisplus分页查询: 3.spring封装对象匹配bootstrap-table插件格式: 4.sql查询隐藏手机号中间四位. ...

  5. Bootstrap Table 中文文档(完整翻译版)

    表格参数: 名称 标签 类型 默认 描述 - data-toggle String ‘table’ 不用写 JavaScript 直接启用表格. classes data-classes String ...

  6. 关于bootstrap table的server分页

    首先是bootstrap初始化的表格参数: // 初始化Table oTableInit.Init = function() { $('#booksTable').bootstrapTable({ u ...

  7. 修改LibreOffice Draw中定义的样式名称

    目前我使用的是LibreOffice 4.2.4.2.经过以往的测试和使用经验,这是诸多版本中较为稳定和bug相对较少的.今天无意中发现该版本的LibreOffice Draw存在一个问题:样式名称修 ...

  8. vue修改富文本中的元素样式

    富文本编辑器目前应用很广泛,而有时候我们想要对其中的一些元素的样式进行修改,就会遇到问题. 首先,直接修改是不可行的,因为是用v-html标签进行渲染的,无法直接获取到. 在修改的时候,一般是按标签进 ...

  9. 修改input标签中的placeholder样式

    input::-webkit-input-placeholder { color: #fff !important; } input:-moz-placeholder { color: #fff !i ...

随机推荐

  1. visio交叉线不凸起

    使用visio作图时,经常会遇到交叉线在相交时会形成一个弯曲弓形,这有时十分影响视图效果.可以采用下面的方法消除弓形. 1.visio2003:只需要选中该交叉线,选择“格式”->“行为”,在打 ...

  2. Phabricator代码审核Audit用户指南

    作者: shaneZhang 分类: 互联网技术 发布时间: 2015-07-04 13:37 概览 Phabricator支持两种代码审查工作流:“review”(提交前审查)和 “audit”(提 ...

  3. 深度学习原理与框架-Tensorflow基本操作-mnist数据集的逻辑回归 1.tf.matmul(点乘操作) 2.tf.equal(对应位置是否相等) 3.tf.cast(将布尔类型转换为数值类型) 4.tf.argmax(返回最大值的索引) 5.tf.nn.softmax(计算softmax概率值) 6.tf.train.GradientDescentOptimizer(损失值梯度下降器)

    1. tf.matmul(X, w) # 进行点乘操作 参数说明:X,w都表示输入的数据, 2.tf.equal(x, y) # 比较两个数据对应位置的数是否相等,返回值为True,或者False 参 ...

  4. virtualBox下Centos系统扩展LVM磁盘空间

    工具准备:下载Gparted Live CD,一个分区管理工具(根据安装的32,64位版本选择对应链接).https://sourceforge.net/projects/gparted/files/ ...

  5. 浅拷贝和深拷贝(java)

    拷贝:多用于prototype原型模式的复制. 数据库连接池,将properties中的jdbc信息(user/password/url/port)等获取后赋值给jdbcData对象,然后将对象复制n ...

  6. android平台yuv缩放相关<转>

    Android的视频相关的开发,大概一直是整个Android生态,以及Android API中,最为分裂以及兼容性问题最为突出的一部分.摄像头,以及视频编码相关的API,Google一直对这方面的控制 ...

  7. spring MVC初始化过程学习笔记1

    如果有错误请指正~ 1.springmvc容器和spring的关系? 1.1 spring是个容器,主要是管理bean,不需要servlet容器就可以启动,而springMVC实现了servlet规范 ...

  8. php运行代码流程和性能优化方法

    ---恢复内容开始--- php文件->扫描->zd引擎去理解->opcodes->执行->输出 例子,用white随机循环20000数据进行性能测试,分别对比isset ...

  9. Haskell语言学习笔记(88)语言扩展(1)

    ExistentialQuantification {-# LANGUAGE ExistentialQuantification #-} 存在类型专用的语言扩展 Haskell语言学习笔记(73)Ex ...

  10. impdp导入文件失败问题解决(ORA-39001/ORA-39000/ORA-39143)

    测试环境 SuSE11 + ORACLE11gR2 问题现象 执行 impdp导入现场导回的dmp文件,导入失败.错误提示如下 $impdp sysdb/oracle directory=imp_da ...