如何在 DataTables 的 FixedColumns 插件中以交互方式调整固定列的大小

Posted 2023-05-07

【中文标题】如何在 DataTables 的 FixedColumns 插件中以交互方式调整固定列的大小

【英文标题】：How to interactively resize a fixed column in DataTables's FixedColumns plugin

【发布时间】：2015-08-05 07:55:34

【问题描述】：

我有下表：

<table id="example" class="stripe row-border order-column" cellspacing="0" >
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Extn.</th>
            <th>E-mail</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Tiger</td>
            <td>Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
            <td>5421</td>
            <td>[e-mail]</td>
        </tr>
    </tbody>
</table>

使用此脚本，我可以向前滚动第二列并让第一列 (First name) 固定。

$(document).ready(function() 
    var table = $('#example').DataTable( 
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false
     );
    new $.fn.dataTable.FixedColumns( table );
 );

JSFiddle

我想做的是手动以交互方式即时调整第一列的大小。我怎样才能做到这一点？

【参考方案1】：

FixedColumns API 中没有本地方法可以执行此操作。而是通过header()设置宽度，这里将第一列设置为200px：

table.tables().header().to$().find('th:eq(0)').css('min-width', '200px');
$(window).trigger('resize');

table.draw() 导致双滚动条（但在调整大小时消失）。不知何故，FixedColumns 没有完全包含在 draw() 中——甚至 FixedColumns update() 也没有做到这一点。但是在窗口上触发resize 就可以了。

分叉小提琴 -> https://jsfiddle.net/k7err1vb/

---

更新。问题的意思完全改变了（？）

嗯，曾经有一个很棒的插件 ColReorderWithResize.js，但它在 dataTables 1.10.x 上效果不佳。因此，如果对可调整大小的固定列的需求是必不可少的，您可以降级。除了新的 API 并且默认样式在 1.9.x 和 1.10.x 之间没有太大区别 - 完全因为 ColReorderWithResize 的需要，我自己在项目中使用 1.9.x。

有人制作了一个 colResize 插件 -> https://github.com/Silvacom/colResize 适用于 1.10.2 及更高版本。这里用在 OP 的小提琴上：

var table = $('#example').DataTable( 
    dom: 'Zlfrtip',
    //target first column only
    colResize: 
       exclude: [2,3,4,5,6,7]
    ,
    ...
)

demo -> https://jsfiddle.net/mhco0xzs/ 并且它“工作” - 不知何故 - 但不如旧的 ColReorderWithResize.js 流畅。有人可以挑战重构 ColReorderWithResize.js，但我自己目前肯定没有时间。

【讨论】：

对不起。但我的意思是让用户以交互方式手动调整第一列的大小。不是程序员在幕后做的。

ColReorderWithResize.js 现在已经被重构，参见jQuery DataTables: Column reordering and resizing 和github.com/jeffreydwalter/ColReorderWithResize。

@Gyrocode.com 不错的信息；看起来不错，只是检查了源代码，我喜欢人们尝试保持与 Alan Jardines 代码或多或少相似的样式和约定。使用该新插件生成答案，并且保证您至少获得一个赞成票 :) 顺便说一句，colspan / rowspan 示例呢？这可能是欺骗所有这些问题的典型答案

我并没有忘记 colspan/rowspan 示例，并计划接下来进行研究。我将尝试使用 ColReorderWithResize 和 FixedColumn 插件，并将更新文章或在此处发布解决方案或两者兼而有之。

【参考方案2】：

您应该尝试使用插件来添加可调整大小的标题功能。你可以试试这个：http://www.bacubacu.com/colresizable/

已经在 ***.com 上提出并回答了这个问题：Resizable table columns with jQuery

【参考方案3】：

我也有和你一样的问题，我使用下面的解决方案。

window.fixedColumns =  new $.fn.dataTable.FixedColumns( table ,  leftColumns: 3 );     

//Events occur when changing column width.(paginate, sort , click, ... ) 
// $('.sorting').click.... 
// $('.paginate_button').click....

$('.DTFC_Cloned').width();    
fixedColumns.fnRedrawLayout();

http://datatables.net/docs/FixedColumns/3.0.0/FixedColumns.html#fnRedrawLayout