[英]columns of datatables resizable [jquery]
我想手动调整表格列的大小。
在 Stack Overflow 上搜索并尝试
如何使用 jQuery UI和jQuery UI 使用 table 和 colspans 调整datatables.js 的列大小
和谷歌示例,官方文档。
https://github.com/dobtco/jquery-resizable-columns & http://jsfiddle.net/Twisty/ah67jopf/3/
我的示例代码
<table id="examTbl" class="table table-bordered table-hover table-sm dataTable dtr-inline" data-resizable="true">
<thead>
<tr>
<th><input type="checkbox" id="chkbox"></th>
<th>1</th>
<th>2</th>
</tr>
</thead>
</table>
<style>
table, td, th {
/*table-layout:fixed;*/
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
数据表设置
var table_option = {
processing: true,
serverSide: true,
searching: false,
responsive: true,
dom: "lfBtip",
ajax: {
url: '/get/textVal'
},
columns: [{
data: 'null',
defaultContent: "<input type='checkbox' class='chkbox'>",
},
{ data: 'test1' },
{ data: 'test2' },
],
autoWidth: false,
drawCallback: function(settings) {
$('table th').resizable({
handles: 'e',
minWidth: 18,
stop: function(e, ui) {
$(this).width(ui.size.width);
}
});
}
}
我认为您可以在样式上添加“调整大小”css 属性。
<table id="examTbl" class="table table-bordered table-hover table-sm dataTable dtr-inline" data-resizable="true"> <thead> <tr> <th><input type="checkbox" id="chkbox"></th> <th>1</th> <th>2</th> </tr> </thead> </table> <style> table, td, th { /*table-layout:fixed;*/ overflow:hidden; white-space: nowrap; text-overflow: ellipsis; resize:horizontal; }
编辑:尝试在您的数据表设置中添加“autoWidth:false”:
var table_option = {
processing: true,
serverSide: true,
searching: false,
autoWidth: false,
responsive: true,
dom: "lfBtip",
ajax: {
url: '/get/textVal'
},
columns: [{
data: 'null',
defaultContent: "<input type='checkbox' class='chkbox'>",
},
{ data: 'test1' },
{ data: 'test2' },
],
autoWidth: false,
drawCallback: function(settings) {
$('table th').resizable({
handles: 'e',
minWidth: 18,
stop: function(e, ui) {
$(this).width(ui.size.width);
}
});
}
}
在这个小提琴中解决: http : //jsfiddle.net/Twisty/ah67jopf/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.