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

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

enter image description here

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可以正常工作。

分叉小提琴 - ＆gt;的 https://jsfiddle.net/k7err1vb/

<强>更新即可。问题的含义完全改变了（？）

好吧，曾经有一个很棒的插件ColReorderWithResize.js，但这对于dataTables 1.10.x来说效果不佳。因此，如果对可调整大小的固定列的需求至关重要，您可以降级。除了新的API 和默认样式在1.9.x和1.10.x之间没有那么大的区别 - 在项目中使用1.9.x完全是因为需要ColReorderWithResize。

有些人制作了一个colResize插件 - ＆gt; 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]
    },
    ...
})

演示 - ＆gt; https://jsfiddle.net/mhco0xzs/ 并且＆＃34;工作＆＃34; - 某种程度上 - 但不如旧的ColReorderWithResize.js那么顺利。有人可以接受挑战来重构ColReorderWithResize.js，但我自己肯定没时间做这件事。

Answer 2

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

问题已在StackOverflow.com上提出并回答：Resizable table columns with jQuery

Answer 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

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

3 个答案: