jQuery Datatables のカスタムの外観の水平スクロールバーを取得しようとしています。これまでに見つけたいくつかの情報を使用して、次のようなものを思いつきました。
$('#table').dataTable({
"bFilter": false,
"bLengthChange": false,
"bInfo": false,
"sPaginationType": "two_button",
"iDisplayLength": 6,
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
"fnInitComplete": function() {
var table_header,
_this = this;
table_header = $('.dataTables_scrollHeadInner').css('position',
'relative');
$('body').find('.dataTables_scrollBody').bind('jsp-scroll-x',
function(event, scrollPositionX, isAtLeft, isAtRight) {
table_header.css('right', scrollPositionX);
}).jScrollPane({
verticalDragMinHeight: 8,
verticalDragMaxHeight: 8,
horizontalDragMinWidth: 82,
horizontalDragMaxWidth: 82,
autoReinitialise: true
});
});
正常に動作します: ただし、ウィンドウのサイズを変更すると、テーブル ヘッダーはコンテンツと同じように縮小されません (ヘッダーはコンテンツよりも幅が広くなっています)。ヘッダーと本文を均等にスクロールするために jScrollPane を jQuery Datatables にアタッチする方法はありますか? 私は次のようなことを意味します:
$('#blabla').find('.dataTables_scrollBody').jScrollPane();
ただし、scrollBody および scrollHead の場合。または、分割せずにスクロール可能な Datatable を初期化してヘッダーと本文を分離する方法はありますか?
ありがとう!