Question

我正在尝试将数据表功能添加到Angular.js thgough angular-datatables bower包中。我需要bootstrap样式。但我没有得到需要的外观。我发现了问题，但我没有找到解决方案。问题是下一个div没有“dt-bootstrap”类。

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

我认为，如果使用“dt-bootstrap”类生成自动生成的div，我的问题就会解决。

我使用下一个功能：

<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

angular-datatables没有为正确的样式添加bootstrap类

1 个答案: