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

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/makelife/blog/3048822