次の表があります。
<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 );
} );
私がしたいのは 手動で その場でインタラクティブに最初の列のサイズを変更します。どうすればそれを達成できますか?
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のリファクタリングに挑戦することもできますが、私自身、現時点では確かにそのための時間はありません。
サイズ変更可能なヘッダー機能を追加するには、プラグインを使用してみてください。あなたはこれを使って試すことができます: http://www.bacubacu.com/colresizable/
StackOverflow.comで質問が行われ、回答は既にここにあります: jQueryでサイズ変更可能なテーブル列
私もあなたと同じように問題があり、次の解決策を使用します。
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