具有過濾器列寬的角度數據表

Question

我嘗試使用過濾器為角度數據表中的列設置寬度。 但是列的寬度沒有改變。

我試着跟隨

   var columnsSpecification = [
      {
          type: 'text',
          bRegex: true,
          bSmart: true
      }, {
          type: 'text',
          bRegex: true,
          sWidth:"90px"}];


    $scope.dtOptions = DTOptionsBuilder.newOptions()
      .withBootstrap()
      .withOption('scrollX', '700%')
      .withOption('scrollY', height + 'px')
      .withOption('oLanguage', { "sEmptyTable": " " })
      .withOption('lengthMenu', [[-1, 1000, 100, 50, 25, 10], ['All', 1000, 100, 50, 25, 10]])
      .withOption('paging', false)
      .withOption('bInfo',false)
      .withColumnFilter({          
      aoColumns:columnsSpecification 
  })
  .withTableTools('/Content/DataTables/swf/copy_csv_xls.swf')
  .withTableToolsButtons(['xls']);

在html文件中我試過這個：

   <table id="table-machines" datatable="ng" class="table table-striped" dt-options="dtOptions">
    <thead>
        <tr>
            <th>Name</th>
            <th style="width: 90px !important">Value</th>                
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="m in records>
            <td>{{m.name}}</td>
            <td style="width: 90px !important">{{m.Value}}</td>                
        </tr>
    </tbody>

但是Value列的另一個是我設定的。

我發現，如果沒有過濾器 - 一切都很好。

如何設置表格寬度並保留過濾器？

Answer 1

vm.dtColumns = [
        DTColumnBuilder.newColumn('id').withTitle('ID').withOption('width', '5%')
    ];

Answer 2

您需要在columnDefs選項中定義選項width ：

vm.dtColumnDefs = [
    DTColumnBuilder.newColumn(1).withOption('width', '90px')
  ];

看這個例子 。

Answer 3

最后，我發現避免數據表覆蓋引導列寬度定義的解決方案：

$scope.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('autoWidth', false)

它就像放入該名稱一樣容易並設置為false ...但它在API中似乎不可用:(