如何使用 jQuery UI 使 datatables.js 的列可调整大小
Posted
技术标签:
【中文标题】如何使用 jQuery UI 使 datatables.js 的列可调整大小【英文标题】：How to make columns of datatables.js resizable with jQuery UI 【发布时间】：2018-04-08 10:00:03 【问题描述】：我找到了在 *** 中调整表格列大小的解决方案
jQuery UI Resize with table and colspans
我正在尝试将其应用于使用服务器端处理填充的数据表，但数据表不允许更改列宽。
我试过这个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 调整列的大小吗？
【问题讨论】：
向我们展示您到目前为止所做的尝试。 【参考方案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%;
【讨论】：
【参考方案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 元素的新大小。
希望对您有所帮助。
【讨论】：
这个例子工作得很好，就像我的代码，但我的不工作。我可以在检查器中看到宽度发生了变化，但在浏览器中没有显示调整大小。 @omixam 您在控制台中看到任何错误吗？<head> 中的库是如何加载的，顺序是什么？
控制台中的任何错误。我禁用了所有库，顺序如下：css：datatables 和 jquery-ui，对于 JS：jquery、jquery-ui 和 datatable。
我建议使用不同的顺序：Jquery UI CSS、Datatable CSS、jQuery、jQuery UI、DataTable。应该像你描述的那样工作。我假设您的意思是控制台中没有出现错误？
我使用了你建议我的顺序，但结果是一样的。控制台中没有错误。以上是关于如何使用 jQuery UI 使 datatables.js 的列可调整大小的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jQuery UI 插件使 html 文本框可拖动和调整大小？
如何使 jquery 移动加载器中 ui-loader 的宽度更宽？
如何使用 jQuery UI 使 datatables.js 的列可调整大小