如何使用jQuery UI调整datatables.js列的大小-前端问题

How to make columns of datatables.js resizable with jQuery UI(如何使用jQuery UI调整datatables.js列的大小)

本文介绍了如何使用jQuery UI调整datatables.js列的大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我找到了在Stackoverflow中调整表列大小的解决方案

jQuery UI Resize with table and colspans

我正在尝试将其应用于使用服务器端处理填充的DataTable，但DataTable不允许更改列宽。

我已经尝试过http://jsfiddle.net/BlackSRC/JvELx/2/

我有一个简单的数据表

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

我的DataTable初始化是：

$(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调整列大小吗？

推荐答案

我看不到问题。您确实要先运行.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);
    }
  });
});

更新

在停止回调中，您可以设置th元素的新大小。

希望这会有帮助。

这篇关于如何使用jQuery UI调整datatables.js列的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！