修改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;
}

 

posted @ 2019-01-19 21:19  小白&小菜  阅读(11243)  评论(1编辑  收藏  举报
我是一个小菜鸟,飞呀飞呀,快飞高