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