angular-datatables没有添加bootstrap类以进行适当的样式设置

Question

我正在尝试通过angular-datatables bower包向Angular.js添加datatables功能。我需要它的引导样式。但我没有得到所需的外貌。我发现了问题，但没有找到解决方案。问题是下一个div没有"dt-bootstrap“类。

<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer">

我想，如果这个自动生成的div是用"dt-bootstrap“类生成的，我的问题就解决了。

我使用的是next功能：

<table class="table table-striped table-bordered table-hover" datatable="ng"></table>

以及接下来的ccs/js文件：

<link rel="stylesheet" href="../bower_components/metisMenu/dist/metisMenu.css" />
<link rel="stylesheet" href="../bower_components/datatables/media/css/jquery.dataTables.css" />
<link rel="stylesheet" href="../bower_components/angular-datatables/dist/plugins/bootstrap/datatables.bootstrap.css" />

<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../bower_components/angular-touch/angular-touch.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="../bower_components/PACE/pace.js"></script>
<script src="../bower_components/metisMenu/dist/metisMenu.js"></script>
<script src="../bower_components/datatables/media/js/jquery.dataTables.js"></script>
<script src="../bower_components/angular-datatables/dist/angular-datatables.js"></script>
<script src="../bower_components/angular-datatables/dist/plugins/bootstrap/angular-datatables.bootstrap.js"></script>
<script src="../bower_components/angular-datatables/dist/plugins/colreorder/angular-datatables.colreorder.js"></script>
<script src="../bower_components/angular-datatables/dist/plugins/columnfilter/angular-datatables.columnfilter.js"></script>
<script src="../bower_components/angular-datatables/dist/plugins/light-columnfilter/angular-datatables.light-columnfilter.js"></script>
<script src="../bower_components/angular-datatables/dist/plugins/colvis/angular-datatables.colvis.js"></script>
<script src="../bower_components/angular-datatables/dist/plugins/fixedcolumns/angular-datatables.fixedcolumns.js"></script>
<script src="../bower_components/angular-datatables/dist/plugins/fixedheader/angular-datatables.fixedheader.js"></script>
<script src="../bower_components/angular-datatables/dist/plugins/scroller/angular-datatables.scroller.js"></script>
<script src="../bower_components/angular-datatables/dist/plugins/tabletools/angular-datatables.tabletools.js"></script>
<script src="../bower_components/angular-datatables/dist/plugins/buttons/angular-datatables.buttons.js"></script>
<script src="../bower_components/angular-datatables/dist/plugins/select/angular-datatables.select.js"></script>

我该如何解决这个问题呢？

Answer 1

您必须在控制器中调用：.withBootstrap();，如下所述：https://l-lin.github.io/angular-datatables/#/bootstrapIntegration