Question

我将angular-datatables与responsive table一起使用，但没有＆＃39;有效：表格看起来没有响应选项。

模块：

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

加载了数据表响应资源：

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

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

Answer 1

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

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

最新版本是2.1.1，你可以做凉亭：

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

现在.withOption('responsive', true)应该有效。与许多其他插件不同，为了使其正常运行，不需要依赖。

AngularJS数据表：响应不起作用

1 个答案: