使用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; }