Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular datatables with filter column width

I tried to set width for column in angular datatables with filters. But width of the column not changed.

I try following

   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']);

In html file I tried this:

   <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>

But Value column another zise rather I setted.

I'v found, that if there is not filter - all fine.

How can I set table width and preserve filters?

like image 435
Michael Lin Avatar asked Sep 08 '15 19:09

Michael Lin


People also ask

How to set column width in DataTables?

As such, the width of the column can be controlled using the columns. width option. This example shows the first column being set to width: 200px (note that this is not pixel perfect in a table, the browser will make some adjustments!), a width that is reflected in the fixed column.

How do you filter data in a DataTable?

Filtering DataTable varieties of ways include select(String) method, which selects the required row or column and then based on that applies the filter. Filtering can be done using Select, Where, AND, OR, NOT logical operator and on top of it applying the value also there.

How do I fit a Div data table?

Datatables tend to overflow on purpose, as the columns are too wide. You have two options: Remove columns to make it so it fits within the div element. Set overflow-y to scroll or auto in css on the containing div.


1 Answers

vm.dtColumns = [
        DTColumnBuilder.newColumn('id').withTitle('ID').withOption('width', '5%')
    ];
like image 157
Haseena P A Avatar answered Sep 30 '22 15:09

Haseena P A