AngularJS Datatable: responsive doesn't works

问题

I'm using angular-datatables with responsive table, but doesn't' works: the table look like without responsive option.

Module:

(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'
                }
            }
        });
    }
})();

Controller:

(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 = [];
    }
})();

template:

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

the datatable responsive resources are loaded:

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

why my datatable isn't responsive?

回答1:

You must include the responsive source code :

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

latest version is 2.1.1, with bower you could do :

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

Now .withOption('responsive', true) should work. Unlike many other plugins there is not a dependency required in order to make it function.

来源：https://stackoverflow.com/questions/44623992/angularjs-datatable-responsive-doesnt-works

标签

angularjs

angular-datatables