【问题标题】:Angular datatables with filter column width具有过滤器列宽的角度数据表
【发布时间】:2015-09-08 19:55:16
【问题描述】:

我尝试使用过滤器为角度数据表中的列设置宽度。 但是列的宽度没有改变。

我尝试关注

   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>

但是我设置了另一个值列。

我发现,如果没有过滤器 - 一切都好。

如何设置表格宽度并保留过滤器?

【问题讨论】:

  • 尝试添加.withOption('autoWidth', false)
  • 我试过了,还是不行。
  • 对我来说都没有,新版本有bug吗?

标签: javascript angularjs datatables angular-datatables


【解决方案1】:
vm.dtColumns = [
        DTColumnBuilder.newColumn('id').withTitle('ID').withOption('width', '5%')
    ];

【讨论】:

    【解决方案2】:

    您需要在columnDefs 选项中定义选项width

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

    看到这个example

    【讨论】:

      【解决方案3】:

      最后我找到了避免数据表覆盖引导列宽度定义的解决方案:

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

      就像输入那个名字并设置为 false 一样简单......但它在 API 中似乎不可用:(

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-12-23
        • 2022-01-03
        • 2021-04-06
        • 1970-01-01
        • 2020-01-02
        • 2020-11-19
        相关资源
        最近更新 更多