使用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. CSS内容简单总结

    day50 1. 内容回顾 1. 伪类和伪元素        1. 伪类            1. :link            2. :visited            3. :hover ...

  2. C#开发VS LUA开发

    一个游戏公司,决定开始用U3D做一款新游戏,这个游戏类型从来没做过. 如果没有一个成熟的游戏框架,那么从头撸起. 是一开始就将LUA热更新考虑进来呢 还是先做成纯C#的框架呢? 考虑因素:游戏逻辑如果 ...

  3. mybatis 获取insert返回的主键

    在我们开发过程中,在插入数据到数据库时,很多时候都需要把其主键返回,这里就说一下mybatis是怎么获取的. 其中mysql和oracle是不同的做法,因为mysql本身就提供字段自增的属性,而ora ...

  4. C++几个重要关键字(包含借鉴其他博主的东西)

    //内存 栈区 与 static区 ,C++为了兼容C,#include 只是文本替换,导致一堆命名空间之间的复杂问题,倍受人诟病 extern  关键字 1.基本含义:意如其名,告诉编译器声明的东西 ...

  5. 记录Git的安装过程

    从https://git-scm.com/download/win,选择Windos版本下载. 选择打开的工具,用的Notepad. 下一步 下一步

  6. Android RxJava 2 的用法 just 、from、map、subscribe、flatmap、Flowable、Function、Consumer ...【转】

    先简单说说RxJava的用途与价值 原文出处:Android RxJava 2 的用法 用途: 异步 (也就是开线程跳转) 价值: 面对复杂的逻辑,它依然 简洁 ,代码 易读 RxJava2 与 Rx ...

  7. SVN 报错“Previous operation has not finished; run 'cleanup' if it was interrupted” 原因及解决方案

    今天遇到的问题 svn无论是执行checkout,commit,update的时候提示需要cleap up,但 svn执行clean up命令时报错“Previous operation has no ...

  8. <assert.h>库学习

    assert的初步认识 assert宏指令是用来诊断程序是否有误的,函数原型如下 void assert(int expression) 那为什么我们要使用assert而不用printf呢?因为ass ...

  9. 跨年操作--new Date()

    //时间在2017/12/31 17:00 --- 2018/1/1 06:00区间,提示用户无法操作公告. //time.js (function(){ var date = new Date(); ...

  10. 04_web基础(五)之cookie与session

    29.Http协议无记忆带来的问题 什么是会话:可简单理解为:用户开一个浏览器,访问某一个web站点,在这个站点点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一次会话. 在一 ...