AngularJS 数据表：响应不起作用

Question

我正在使用 angular-datatables with responsive table，但不起作用：table 看起来没有响应选项。

模块：

(function ()
{
    'use strict';

    angular
        .module('app.myapp',['datatables'])
        .config(config);

    function config($stateProvider)
    {
        $stateProvider.state('app.myapp', {
            url      : '/',
            views    : {
                'content@app': {
                    templateUrl: 'app/main/myapp.html',
                    controller : 'MyController as vm'
                }
            }
        });
    }
})();

控制器：

(function ()
{
'use strict';

angular
    .module('app.myapp')
    .controller('MyController', MyController);

function MyController(DTColumnBuilder, DTOptionsBuilder)
{
    var vm = this;

    vm.dtOptions = DTOptionsBuilder.newOptions()
        .withOption('ajax', {
            url: '/rest/getfoo', 
            type: 'POST',
            dataSrc: "data",
        })
        .withOption('processing', true)
        .withOption('serverSide', true)
        .withOption('responsive', true)
        .withPaginationType('full_numbers')
        .withDisplayLength(20);

    vm.dtColumns = [];
    }
})();

模板：

<table datatable class="dataTable row-border hover responsive nowrap"  
    dt-options="vm.dtOptions" 
    dt-columns="vm.dtColumns" 
    width="100%" 
    cellspacing="0">
</table>

数据table 已加载响应资源：

<link rel="stylesheet" href="../bower_components/datatables/media/css/jquery.dataTables.css">
<script src="../bower_components/datatables-responsive/js/dataTables.responsive.js"></script>

为什么我的数据table 没有响应？

Answer 1

您必须包含响应式源代码：

datatables.net-responsive
datatables.net-responsive-dt

最新版本是 2.1.1，你可以使用 bower :

bower install datatables.net-responsive#2.1.1 --save
bower install datatables.net-responsive-dt#2.1.1 --save

现在 .withOption('responsive', true) 应该可以了。与许多其他插件不同，它不需要依赖项即可运行。

AngularJS 数据表：响应不起作用

AngularJS Datatable: responsive doesn't works

angularjs

angular-datatables