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?
