角度数据表响应答案

【问题标题】：Angular-datatable responsive角度数据表响应
【发布时间】：2016-02-21 00:12:48
【问题描述】：

我正在创建一个响应式 SPA。在这个应用程序中，我在尝试在 div 标签中使用 angular-datatable 时遇到问题。
这是 jsfiddle 链接 /8sveskkh/ 请指导我如何确保我的数据表位于包含的 div 中。

【问题讨论】：

jsfiddle 是否包含 Bootstrap？
这里到底有什么问题？您希望表格完全占据其父 div 吗？
数据表应该在外部div的边界内，当我们减小屏幕尺寸时不会发生这种情况
但是你的小提琴不包括 Bootstrap css
如果它工作正常，请检查这个小提琴jsfiddle.net/n0ze6e8s

标签： html css angularjs datatable angular-ui-bootstrap

【解决方案1】：

您可以使用第三方插件使数据表具有响应性。

<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.min.js"></script>

配置dtOptions如下：

$scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
        .withPaginationType('full_numbers')
        // Active Responsive plugin
        .withOption('responsive', true);

请参考：http://l-lin.github.io/angular-datatables/archives/#!/withResponsive 了解其他自定义选项，这会让您过得愉快。

【讨论】：

【解决方案2】：

将table 包装在带有.table-responsive 类的div 中，使其不会溢出其容器。

<div class="table-responsive">
    <table class="table">
    </table>
</div>

这里是jsFiddle。

【讨论】：

多么聪明的答案。竖起大拇指！