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

Question

我有下表:

<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
    <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>t.nixon@datatables.net</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

我想要做的是 手动交互式调整第一列的动态.我怎样才能做到这一点？

Answer 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之间没有那么大的区别 - 在项目中使用1.9.x完全是因为需要ColReorderWithResize.

有些人制作了一个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]
    },
    ...
})

演示 - > https://jsfiddle.net/mhco0xzs/它"工作" - 不知何故 - 但不像好旧的ColReorderWithResize.js那么顺利.有人可以接受挑战来重构ColReorderWithResize.js,但我自己肯定没时间做这件事.