问题描述:

I'm trying to add datatables functionality to Angular.js thgough angular-datatables bower package. I need bootstrap styling for it. But i didn't get needed appearance. I found the problem but i not found the solution.

The problem is that next div have no "dt-bootstrap" class.

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

I think, my problem will be solved if this automatically generated div will be generated with "dt-bootstrap" class.

I using next functionality:

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

and next ccs/js files:

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

How i can solve this problem?

网友答案:

You have to call: .withBootstrap(); in your controller as described here: https://l-lin.github.io/angular-datatables/#/bootstrapIntegration

相关阅读:
Top