datatables如何自定义buttons的位置和按钮样式

原创
2019/05/13 12:19
阅读数 4.6K

1. DataTable和dataTable

var table = $("#hkdzkDzkTable").DataTable({

用DataTable代替dataTable

2. 自定义渲染按钮栏位置 testaaa就是自定义div

table.buttons().container()
    .appendTo( $('#testaaa'));

3. 全局设置按钮样式

*自定义列筛选样式*/
.buttons-colvis {
    color: #fff !important;
    background-color: #5a98de !important;
    border-color: #5a98de !important;
}

.buttons-colvis:hover,
.buttons-colvis:focus,
.buttons-colvis:active,
.buttons-colvis.active {
    color: #fff !important;
    background-color: #0a6999 !important;
    border-color: #0a6999 !important;
}

4.  修改dataTables.buttons.js中 1169 行,自定义按钮栏外层div样式.主要是吧bootstrap自带的top样式删除.

\datatables\Buttons-1.5.6\js\dataTables.buttons.js

.my-dt-buttons {
    position: relative;
    float: left;
}

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部