web-dev-qa-db-ja.com

DataTablesのFixedColumnsプラグインで固定列のサイズをインタラクティブに変更する方法

次の表があります。

<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>[email protected]</td>
        </tr>
    </tbody>
</table>

このスクリプトを使用して、2列目以降をスクロールし、1列目（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

javascriptjqueryhtmldatatablesjquery-datatables
13
neversaint

FixedColumns API には、これを行うネイティブメソッドはありません。代わりに、header()を使用して幅を設定します。ここでは、最初の列を_200px_に設定します。

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

table.draw()を使用すると、二重のスクロールバーが表示されます（ただし、サイズを変更すると消えます）。どういうわけか、FixedColumnsはdraw()に完全には含まれていません。FixedColumnsupdate()でさえ、これは正しく行われません。しかし、ウィンドウで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/colResize1.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のリファクタリングに挑戦することもできますが、私自身、現時点では確かにそのための時間はありません。

11
davidkonrad

サイズ変更可能なヘッダー機能を追加するには、プラグインを使用してみてください。あなたはこれを使って試すことができます： http://www.bacubacu.com/colresizable/

StackOverflow.comで質問が行われ、回答は既にここにあります： jQueryでサイズ変更可能なテーブル列

1
Samvel Avanesov

私もあなたと同じように問題があり、次の解決策を使用します。

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

1
PufferTD