web-dev-qa-db-ja.com

.draw（）の後にjQueryDataTablesのスクロール位置を維持する方法

小さなテーブル（12行）にjQueryDatatablesプラグインを使用しています。一部の_<input type="text" ..._フィールドでは編集が可能です。入力フィールドがフォーカスを失ったとき、その値を検証し、場合によってはフィールド値を変更する必要があります。後で.draw()を発行せずに、変更された入力フィールド値をDataTablesで認識できるようにすることはできませんでしたが、これにより、テーブルがテーブルの一番上にスクロールします。

.draw（）を発行した後、現在のスクロール位置を維持する方法はありますか？

_$('#mytable').on('blur', 'input', function (e) {

    var inputFieldId = this.id;
    var inputFieldVal = $(this).val();

    { ... perform validation of field value ... }

    $('#mytable').DataTable().rows().invalidate().draw();
});
_

[〜＃〜]編集[〜＃〜]

誰かが私と同じことをしようとしているのを見ました、そして彼らは次のコードが彼らのために働いたことを示しました。これは私が必要なことを達成するための非常に簡単な方法のように思えますが、私は常にscrollTop = 0を自分で取得しています。現在選択されている行の行インデックスを取得する方法を知っている人はいますか？

_var scrollPos = $(".dataTables_scrollBody").scrollTop();
$('#mytable').DataTable().rows().invalidate().draw(false);
$(".dataTables_scrollBody").scrollTop(scrollPos);
_
jquerydatatablesjquery-datatables
11
rwkiii

私はあなたがそれをすることができるとは思いません、しかしあなたは代わりにコールバック関数を使うことができます：

$(document).ready(function() {
    var selected = [];

    $("#example").dataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "scripts/ids-arrays.php",
        "rowCallback": function( row, data ) {
            if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
                $(row).addClass('selected');
            }
        }
    });

    $('#example tbody').on('click', 'tr', function () {
        var id = this.id;
        var index = $.inArray(id, selected);

        if ( index === -1 ) {
            selected.Push( id );
        } else {
            selected.splice( index, 1 );
        }

        $(this).toggleClass('selected');
    } );
} );

参照： https://datatables.net/examples/server_side/select_rows.html

3
JC Sama
var table = $('table#example').DataTable({
"preDrawCallback": function (settings) {
pageScrollPos = $('div.dataTables_scrollBody').scrollTop();
},
"drawCallback": function (settings) {
$('div.dataTables_scrollBody').scrollTop(pageScrollPos);
}});

これは私にとってはうまくいくようです。テーブルが描かれた後、私はdiv.dataTables_scrollBodyを見つけなければなりませんでした。

18
Paul Matthew

少し異なるシナリオですが、これをここに追加したかっただけです。これは私の場合はうまくいき、答えを探してここに到着する他の人にも役立つでしょう。

サーバー側の処理を使用しており、table.ajax.reload()を使用して10秒ごとにテーブルデータの更新を行っています。この関数は、現在のページング値を維持するための引数を受け入れますが、スクロール位置を維持できません。解決策は、OPが言及したものと非常に似ており、コールバックのスクロール位置を設定します。なぜそれがうまくいかなかったのかわかりませんが、これが私が成功して使用している間隔コードです：

setInterval( function () {
    scrollPos = $(".dataTables_scrollBody").scrollTop();
    myTable.ajax.reload(function() {
        $(".dataTables_scrollBody").scrollTop(scrollPos);
    },false);
}, 10000 );
6
billynoah

描画関数にpageパラメータを渡すと、テーブルはスクロール時にシフトしませんが、.DataTableソースから再読み取りされます。例えば。 DataTableを更新するデータを「保存」した後：

$("your-selector").DataTable().row(t_itemid).invalidate();
$("your-selector").DataTable().row(t_itemid).draw('page');

注：DataTableのインスタンス化でid列を使用しているため、単一の行を直接操作するのが簡単です。しかし、pageパラメーターは望ましい結果をもたらすと思います。

5
Charlie

DataTables 1.10で解決した方法は、 preDrawCallBack を使用してScrollTopの位置を保存してから、 DrawCallback を使用して設定することです。

var pageScrollPos = 0;

var table = $('#example').DataTable({
  "preDrawCallback": function (settings) {
    pageScrollPos = $('body').scrollTop();
  },
  "drawCallback": function (settings) {
    $('body').scrollTop(pageScrollPos);
  }
});
4
sur

次のコードは、Datatablesサーバー側のリロード時にスクロール位置を保持します。

var table =  $('#mytable').DataTable();

var start_row = table.scroller.page()['start'];

table.ajax.reload(function () {

    table.scroller().scrollToRow(start_row, false);

}, false);
0
DragonSpirit

このハックはどうですか？ scrollTop()は含まれません。最初にjquery.dataTables.jsを開き、この行を探して削除します。

divBodyEl.scrollTop = 0

その後、draw（）/ clear（）呼び出しの前に次のコードを配置します。

var $tbl=$('#my_table_id');
if (!document.getElementById('twrapper')) $tbl.wrap( '<div id="twrapper" style="display:block; height:'+$tbl.height()+'px;"></div>' );
else $('#twrapper').css('height',$tbl.height()+'px');

これを理解するのに少し時間がかかりました。

0
PatlaDJ