[英]columns of datatables resizable [jquery]
I want to manually resize a table column column.我想手动调整表格列的大小。
search on Stack Overflow and tried在 Stack Overflow 上搜索并尝试
How to make columns of datatables.js resizable with jQuery UI & jQuery UI Resize with table and colspans 如何使用 jQuery UI和jQuery UI 使用 table 和 colspans 调整datatables.js 的列大小
and google example, official documentation.和谷歌示例,官方文档。
https://github.com/dobtco/jquery-resizable-columns & http://jsfiddle.net/Twisty/ah67jopf/3/ https://github.com/dobtco/jquery-resizable-columns & http://jsfiddle.net/Twisty/ah67jopf/3/
my example code我的示例代码
<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>
DataTables setting数据表设置
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);
}
});
}
}
I think you can add "resize" css property on your styles.我认为您可以在样式上添加“调整大小”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; }
Edit: Try adding "autoWidth:false" on your datatable settings:编辑:尝试在您的数据表设置中添加“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);
}
});
}
}
Solved in this fiddle: http://jsfiddle.net/Twisty/ah67jopf/3/在这个小提琴中解决: http : //jsfiddle.net/Twisty/ah67jopf/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.