可调整大小的数据表列 [jquery]答案

【问题标题】：columns of datatables resizable [jquery]可调整大小的数据表列 [jquery]
【发布时间】：2021-12-22 16:53:45
【问题描述】：

我想手动调整表格列的大小。

在 Stack Overflow 上搜索并尝试过

How to make columns of datatables.js resizable with jQuery UI & jQuery UI Resize with table and colspans

还有google例子，官方文档。

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);
    }
  });
 }
}

【问题讨论】：

控制台没有错误。

标签： javascript jquery node.js datatables resizable

【解决方案1】：

我认为您可以在样式中添加“resize”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;
}

【讨论】：

感谢您的回复。如果我按照你说的那样做，只有表格顶部的行移动，包含下面数据的行是相同的。如何解决？
您是否希望“调整大小”功能出现在表格的标题中，而不是出现在内容中？
是的，我想做的表格就像这个例子。 examples.bootstrap-table.com/#extensions/resizable.html（只能调整上排，调整下排也调整下排）

【解决方案2】：

编辑：尝试在您的数据表设置中添加“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/

【讨论】：