如何使用jQuery UI使datatables.js的列可調整大小

Question

我找到了一種在stackoverflow中調整表的列大小的解決方案

帶有表和列的jQuery UI調整大小

我正在嘗試將其應用於使用服務器端處理填充的數據表，但是該數據表不允許更改列寬。

我已經嘗試過這個http://jsfiddle.net/BlackSRC/JvELx/2/

我有這個簡單的數據表

<table id="datatable-1" class="table table-hover" style="width: 100%">
</table>

我的數據表初始化是：

 $(table).DataTable({ 'lengthMenu': [[10, 25, 50, 100], [10, 25, 50, 100]], 'ordering': false, 'processing': true, 'serverSide': true, 'dom': 'Blfrtip', 'ajax': { 'url': 'ajax.php', 'type': 'GET' }, 'columns':[ {'data': 'id', 'title': 'Id'}, {'data': 'A', 'title': 'A'}, {'data': 'B', 'title': 'C'}, {'data': 'C', 'title': 'D'}, {'data': 'D', 'title': 'E'} ] }); 

有人知道如何使用datatables.js調整列的大小嗎？

Answer 1

嘗試在數據表autoWidth選項設置為false

$(table).DataTable({
    'lengthMenu': [[10, 25, 50, 100], [10, 25, 50, 100]],
    'ordering': false,
    'processing': true,
    'serverSide': true,
    'autoWidth': false,
    'dom': 'Blfrtip',
    'ajax': {
        'url': 'ajax.php',
        'type': 'GET'
    },
    'columns':[
        {'data': 'id', 'title': 'Id'},
        {'data': 'A', 'title': 'A'},
        {'data': 'B', 'title': 'C'},
        {'data': 'C', 'title': 'D'},
        {'data': 'D', 'title': 'E'}
    ]
});

然后添加CSS

table {
    width: 100%;
}

Answer 2

我沒看到問題。 您確實想先運行.DataTable() ，然后再運行.resizable()

示例： http ： //jsfiddle.net/Twisty/ah67jopf/3/

的JavaScript

$(function() {
  $(".data").DataTable({
    'lengthMenu': [
      [10, 25, 50, 100],
      [10, 25, 50, 100]
    ],
    'ordering': false,
    'processing': true,
    'serverSide': true,
    'dom': 'Blfrtip',
    'ajax': {
      'url': 'ajax.php',
      'type': 'GET'
    },
    'columns': [{
      'data': 'id',
      'title': 'Id'
    }, {
      'data': 'A',
      'title': 'A'
    }, {
      'data': 'B',
      'title': 'C'
    }, {
      'data': 'C',
      'title': 'D'
    }, {
      'data': 'D',
      'title': 'E'
    }]
  });
  $('table th').resizable({
    handles: 'e',
    minWidth: 18,
    stop: function(e, ui) {
      $(this).width(ui.size.width);
    }
  });
});

更新

在Stop回調中，可以設置th元素的新大小。

希望能有所幫助。