Question

有没有办法在angularjs数据表中更改按钮样式（colvis，copy，print，excel）。

<project ...>
    :
    <properties>
        <at>@</at>
        :
        <argLine>...</argLine>
        <my.jacoco.args/>
    </properties>
    :
    <build>
        <plugins>
            <plugin>
                <groupId>org.jacoco</groupId>
                <artifactId>jacoco-maven-plugin</artifactId>
                <version>0.8.0</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>prepare-agent</goal>
                        </goals>
                        <configuration>
                            <propertyName>my.jacoco.args</propertyName>
                            :
                        </configuration>
                    </execution>
                    :
                </executions>
            </plugin>

            <plugin>
                <artifactId>maven-failsafe-plugin</artifactId>
                <version>2.21.0</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>integration-test</goal>
                        </goals>
                        <configuration>
                            <argLine>${at}{my.jacoco.args} ${at}{argLine}</argLine>
                            :
                        </configuration>
                    </execution>
                    :
                </executions>
            </plugin>
            :
        </plugins>
    </build>
</project>

我能做到的唯一方法是直接在源代码中，但这不是好方法。这里是jquery的解决方案，但这对DOM没有任何影响

vm.dtOptions = DTOptionsBuilder.newOptions().withButtons([
    'colvis',
    'copy',
    'print',
    'excel'
]);

CSS

$('#myTable').DataTable( {
buttons: {
    buttons: [
        { extend: 'copy', className: 'copyButton' },
        { extend: 'excel', className: 'excelButton' }
    ]
}
} );

谢谢

Answer 1

只需用文字替换按钮标识符，然后添加className：

.withButtons([
   'colvis', 
   { extend: 'copy', className: 'copyButton' },
   'print',
   { extend: 'excel', className: 'excelButton' }
]);

这适用于＆＃34;清洁＆＃34;安装，但您可能包括所有默认样式表。

DataTables默认使用<a>标记，并将其设置为通过.dt-button类的按钮，它具有:hover的许多伪类样式，依此类推。这使得改变例如背景变得复杂，你需要额外的hackish CSS。

此外，DataTables本身已经为每个按钮类型注入了唯一的类，例如.buttons-excel，您可以从中受益。

我建议您通过dom选项完全重置默认行为：

.withButtons({
   dom: {
     button: {
       tag: 'button',
       className: ''
     }
   },
   buttons: [
     'colvis', 
     'copy',
     'print',
     'excel'
   ]
})

现在，您可以从头开始设置示例.buttons-excel：

.buttons-excel {    
  background-color: red;
  color: white; 
  border: 1px outset;
}
.buttons-excel:hover {
  background-color: pink;
}

Answer 2

如果您正在使用Bootstrap 4口味的DataTables，则按钮将自动具有btn-secondary类。
使用dom选项，您将完全失去引导设计。
但是，您可以像这样添加类：

myTable = $('#myTableId').DataTable({
    buttons: [
      { extend: 'colvis', className: 'btn-outline-secondary' },
      { extend: 'excel', className: 'btn-outline-secondary' }
]});

但是对我来说，这并没有改变按钮的设计，因为btn-secondary仍然存在。所以我手动删除了后遗症。

  setTimeout(function () {
    $oTable.buttons().container().addClass('ml-2').appendTo('#myTableId_length'); //attach buttons to table length choser
    $oTable.buttons().container().find('.btn').removeClass('btn-secondary'); //remove class btn secondary
  }, 500);

将其包装为超时以确保所有内容均已渲染过。

数据表 - 更改按钮样式

2 个答案: