2017-06-19 90 views
2

我正在使用angular-datatablesresponsive table,但沒有工作:表看起來沒有響應選項。AngularJS Datatable:響應不起作用

模塊:

(function() 
{ 
    'use strict'; 

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

    function config($stateProvider) 
    { 
     $stateProvider.state('app.myapp', { 
      url  : '/', 
      views : { 
       '[email protected]': { 
        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> 

爲什麼我的數據表無法響應?

回答

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)應該工作。與許多其他插件不同,爲了使其發揮作用,不需要依賴項。

+0

謝謝,現在有用! – ar099968