web-dev-qa-db-ja.com

垂直スクロールでjQuery Datatablesヘッダーの位置がずれている

これをdatatables.netフォーラムに投稿しましたが、1週間経ってもまだ応答がありません。ここで助けを見つけることができれば幸いです...

私はデータテーブルバージョン1.8.1を使用していますが、垂直スクロールを有効にして列ヘッダーの配置を悪夢に見ています。

以下に投稿したコードでは、FirefoxとIE8およびIE9でヘッダーが正しく並んでいますが、ChromeおよびIE7はオフです。lotこのプロジェクトのデータテーブル、これはすべての問題です。私は助けを求めています！

編集：これはテーブルの幅を設定することと関係があることがわかりました。データテーブルはコンテナの幅を使用します。幅を設定しない場合、すべてがうまく整列しますページの必要な場所に）テーブルのdiv（または上位のどこかの親div）に幅をまったく与えた場合、ヘッダーは適切に整列しません。

ありがとう!!

スクリーンショット：

www.dennissheppard.net/firefox_alignment.png

www.dennissheppard.net/chrome_alignment.png

www.dennissheppard.net/ie7_al​​ignment.png

otable = $('#order_review_grid').dataTable({                
    'fnRowCallback': function (nRow, strings, displayIndex, dataIndex) {
        return formatRow(nRow, dataIndex);
    },
    'fnDrawCallback':function()
    {
        checkIfOrderSubmitted(this);                    
    },
    'aoColumnDefs':
    [
        { 'bVisible': false, 'aTargets': [COL_PRODUCT] },
        { 'bSortable': false, 'aTargets': [COL_IMAGE, COL_DELETE] },
        { 'sClass': 'right_align', 'aTargets': [COL_PRICE] },
        { 'sClass': 'center_align', 'aTargets': [COL_BRAND,COL_PACK] },
        { 'sClass': 'left_align', 'aTargets': [COL_DESCRIPTION] }
    ],
    'sDom': 't',
    'sScrollY':'405px',
    'bScrollCollapse':true,
    'aaSorting':[]
});

<table id="order_review_grid" class="grid_table" cellpadding="0px" cellspacing="0px">                 
    <thead class="grid_column_header_row" id="order_review_grid_column_header_row">
        <tr>
            <td class="" id='sequenceNumber'>SEQ #</td>
            <td class="grid_sc_header" id='statusCode'>Sc</td>
            <td class="grid_sc_header" id='onOrderGuide'>O.G.</td>
            <td class="grid_image_header" id='image'>Image</td>                         
            <td class="grid_description_header" id='description'>Description</td>                           
            <td class="grid_brand_header" id='label'>Brand</td>
            <td class="grid_pack_header" id='packSize'>Pack</td>
            <td class="grid_price_header" id='price'>Price</td>
            <td class="grid_qtrfull_header" id='caseQuantity'>Full</td>
            <td class="grid_qtrypart_header" id='eachQuantity'>Partial</td>
            <td class="grid_refnum_header" id='referenceNumber'>Ref #</td>
            <td class="grid_refnum_header">&nbsp;</td>
        </tr>
    </thead>
    <tbody class="">
        <!-- loaded data will go here -->
    </tbody>
</table>
javascriptjqueryhtmldatatables
23
dennis.sheppard

私には問題があり、それがCSSの副作用であることが判明しました。すべての外部CSSを無効にして、問題が解決するかどうかを確認してください。

8
tmanthey

私はここで同じ問題を抱えています。 Mozilla Firefoxでは正常に動作します（ピクセル単位の完全な列揃え）、Operaでなく、Chrome 21ではありません。

解決：

この投稿で言及されているように http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1

基本的に何が起こっているのかは、DataTablesがテーブルの幅を読み取ろうとしていることです。ブラウザが描画しているため、ヘッダーを一致させることができます。問題は、DataTablesがページでこの計算を行うとき、ブラウザにスクロールバーが表示されていないことです。したがって、計算が少し間違っています。これがWebkitのバグであると提案する理由は、DataTablesがすべてのロジックを実行した後でも、スクロールバーがまだ表示されていないためです。次のコードを追加すると、この効果を確認できます。

console.log（$（oTable.fnSettings（）。nTable）.outerWidth（））; setTimeout（function（）{console.log（$（oTable.fnSettings（）。nTable）.outerWidth（））;}、1）;

興味深いのは、setTimeoutを追加して実行した後、まだ1つの列が揃っていないことです。 「sScrollX」：「100％」、「sScrollXInner」：「100％」を追加すると、すべての列が整列しました（ピクセル単位）。

Chrome/Chromiumのソリューション、FF、Opera、IE9の作品：

$(document).ready(function()
{
  var oTable = $('#mytable').dataTable(
  {
    "sScrollY":  ( 0.6 * $(window).height() ),
    "bPaginate": false,
    "bJQueryUI": true,
    "bScrollCollapse": true,
    "bAutoWidth": true,
    "sScrollX": "100%",
    "sScrollXInner": "100%"
  });


  setTimeout(function ()
  {
    oTable.fnAdjustColumnSizing();
  }, 10 );

});
24
broadband

Overflow：autoでdivで「dataTable」テーブルをラップすることにより、この問題を解決しました。

.dataTables_scroll
{
    overflow:auto;
}

dataTableの初期化後にこのJSを追加します

jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');

SScrollXまたはsScrollYを使用しないで、削除してから、同じことを行うdivラッパーを自分で追加します。

9
Sharjeel Ahmed
var table = $("#myTable").DataTable({
            "sScrollY": "150px",
            //"bAutoWidth": false // Disable the auto width calculation 
        });

    $(window).resize( function () {
        table.columns.adjust();
    } );
6
Gkrish
if ( $.browser.webkit ) {
    setTimeout( function () {
        oTable.fnAdjustColumnSizing();
    }, 10 );
}

私にとって完璧に働いた！

5
user4190052

私は同様の問題を抱えていましたが、私のものは、再描画を引き起こす方法でテーブルを検索または並べ替えまたは対話した後にサイズが合うようにサイズを変更し、再描画を試してみました...私のために働いた面白い修正は、oTable.fnFilter( "x",0 )とoTable.fnFilter( "",0 )をこの同じ順序で呼び出していました（検索とクリア検索）...これは動作します... lol .. :)

3
Kunmi

これはあなたを助けるかもしれません（確かではありませんが、試してみる価値があると思います）

このコードをページに追加します

if ( $.browser.webkit ) {
   setTimeout( function () {
       oTable.fnAdjustColumnSizing();
   }, 10 );
}

ここから Chrome＆Safari）の幅の列の問題

また、（タグを空のままにして）で定義するのではなく、コンストラクタでのみ列を定義しようとする価値があると思います

2
Daniel

列のデータが大きすぎて収まらず、データに改行の場所がないという問題がありました。私の解決策は、オーバーフローと次のようなタイトル属性を持つdivを追加することでした：

<td style="width: 110px;max-width:200px;"><div style="overflow:hidden;" title="@item.NewValue" >@item.NewValue</div></td>

これにより、テーブルはほぼ完全に落ち着きました。

1
pat capozzi

ブートストラップを使用している場合：

.table {
    width: 100%;
    max-width: none; // >= this is very important
}
1
NinjaOnSafari

私もこの問題を抱えていました。多くの異なる試行の後、私は以下を試して成功しました。

スタイル属性にfloatプロパティを持つラベルタグを追加してみました。それからそれは見つけました。

例えば：

<td class="" id='sequenceNumber'><label style="float:left;">SEQ #</label></td>
1
Beniston

これは、csDとsDomの小さな変更を使用して処理できます。

CSSファイルに次のクラスを追加します

.scrollDiv {
    max-width:860px; //set width as per your requirement
    overflow-x:scroll;  
}

テーブルのsDom属性の「t」を<"scrollDiv" t>に置き換え、テーブルのscrollX属性を削除します

保存してお楽しみください！ :)

0
Anupam Sharma

私も同じ問題に直面しました。 datatableプロパティから'sScrollY':'405px'を削除して解決し、 固定ヘッダー を使用しました。

0
jonathan

Firefoxで同じ問題が発生したため、スクリプトjqueryを次のように少し変更しました（jquery.dataTables.jsバージョン1.9.4）：

line 3466 (v1.9.4) : nScrollHeadInner.style.paddingRight = "0px"; //instead of bScrolling ? o.oScroll.iBarWidth + "px" : "0px";

line 3472 (v1.9.4) : nScrollFootInner.style.paddingRight = "0px"; //instead of bScrolling ? o.oScroll.iBarWidth + "px" : "0px";

並べ替えとフィルタリングの後でも機能します。

0
Elisabeth

これは私がこの問題を取り除く方法です：

私はこれを一般的に使用して、Ajax呼び出しが完了した後に関数を実行します

    WaAjaxHelper = {
    arr_execute_after_ajax: null,
    add_function_to_execute_after_ajax: function (fun) {

        if (typeof fun == 'function') {
            if (!this.arr_execute_after_ajax) {
                this.arr_execute_after_ajax = [];
            }
            this.arr_execute_after_ajax.Push(fun)
            return true;
        } else {
            alert('ERROR: WaAjaxHelper.add_function_to_execute_after_ajax only functions possible');
            return false;
        }
    },
    execute_after_ajax: function () {
        if (this.arr_execute_after_ajax) {
            $.each(this.arr_execute_after_ajax, function (index, value) {
                try {
                    value();

                } catch (e) {
                    console.log(e);
                }
            })
        }
        this.arr_execute_after_ajax = null;
    }
}


$(document).ready(function () {
    $.ajaxSetup({
        async: true,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Accept", "text/javascript");
            $('.blockUI').css('cursor', 'progress');
        },
        complete: function (jqXHR, textStatus) {
            $('body').removeClass('waiting');
        },
        error: function (jqXHR, textStatus, errThrown) {
            alert("Ajax request failed with error: " + errThrown);
            ajax_stop();
        }
    });
    $(document).ajaxStart(ajax_start).ajaxStop(ajax_stop);
});


ajax_start = function () {
    // do something here
}
ajax_stop = function () {
   WaAjaxHelper.execute_after_ajax();
}

ビュー内：

  var tbl;
  WaAjaxHelper.add_function_to_execute_after_ajax(function (){tbl.fnDraw()})

ここで、tblはデータテーブルオブジェクトを格納します。

0
Holger

私がまったく同じ問題を抱えているかどうかはわかりません。 40列以上の非常に大きなテーブルを扱い、水平および垂直スクロールを使用していました。ただし、ブラウザウィンドウが非常に大きく設定されているため、テーブル全体を表示できる場合、列見出しは左揃えになり、テーブルのコンテンツは中央に配置されます。

Firebugで、DataTablesを介してテーブルの幅が1352pxになっていることに気付きました。それを100％に設定すると、すべてが揃います！

0
user934948

最初のウィンドウスクロールで幅がずれることがわかったので、解決策は、最初のスクロールでは新しいテーブルの描画のみを要求することです。

_const $table = $('#table').DataTable({ ... });

$(window).on('scroll', () => {
  $(window).off('scroll');
  $table.tables().draw();
});
_

編集：setTimeout関数でも動作します。これは、ミスアライメントがいつ発生するかによって異なります。

$table.tables().draw()はここのキーです。

0
Alexandre Pires

私はこれがかなり古いスレッドであることを知っていますが、ヘッダーの配置の問題を検索するときにここに行きました。別のソリューションが必要だったので、ここに投稿して、誰かが役に立つと思うようにしました。

スタイルブロックに以下を追加したところ、問題が解決しました。

.table {table-layout:auto !important;}

Datatablesは固定レイアウトを追加するようですので、この行を追加すると、スクロール時にヘッダーがデータと正しく整列します

0
Sudhir

JS

$('#<%=gridname.ClientID%>').dataTable( {                   

           "paging":         false
            });        

        });

次に、gridviewの上に、次のようにdiv要素を追加します。

  <div style ="height:600px; overflow:auto;"> 
  <asp:GridView ID="id" runat="server" DataKeyNames="key" ClientIDMode="Static" HeaderStyle-BackColor="#99ccff"
        BorderStyle="Inset" BorderWidth="1px" CellPadding="4" HorizontalAlign="Center" AutoGenerateColumns="false" Width="98%"  >
etc..
</div>
0
user6832758

bootstrap=を使用し、これで管理しました

<table id="datatable_patients" class="table table-striped table-bordered table-hover table-responsive" width="100%">
     <thead></thead>
     <tbody></tbody>
</table>
0
Colbiocin

bootstrap 3でこの問題があり、この問題は、bootstrapスタイリングが適用された後に追加したthおよびtd要素の左右のパディングに関連していました。 。左右のパディングを削除すると、私の場合の問題が修正されました。

0
sonstone