[jQuery] DataTablesのページャーのレイアウトがずれる

HTML&CSSBootstrap3,DataTables,jQuery

Bootstrap3とDataTablesでテーブルを作ったら、ページャーがずれた。このとき調べたことだけど、テーブル上のSearchボックスとか、表示行数とかパーツのレイアウト変えたいときに使える

現象

ページャーの数が増えると、最後の部分がズレる
datatable-pager-layput-off
datatable-pager-layput-off

解決方法

styleシートを疑う

実際、コレだった…

いろんなページで使い回す用のstyel.cssを読み込んでいて、その中にulとliをなんかしててそれが原因だった。DataTablesのページャーもulとliでできていて、影響を受けていた

これからは絶対にクラス名を付けて使おう

ページャーオプションで表示形式変える

ページャー表示は、DataTablesの中でいくつかの種類が用意されているので、表示される要素の個数を減らす
DataTables pagingTypeはココ

pagingTypeの種類
numbers – Page number buttons only (1.10.8)
simple – 'Previous’ and 'Next’ buttons only
simple_numbers – 'Previous’ and 'Next’ buttons, plus page numbers (Default)
full – 'First’, 'Previous’, 'Next’ and 'Last’ buttons
full_numbers – 'First’, 'Previous’, 'Next’ and 'Last’ buttons, plus page numbers
first_last_numbers – 'First’ and 'Last’ buttons, plus page numbers

ページャーオプションを使うと、こんな感じになる

See the Pen DataTables pagingType by AgoPeanuts (@AgoPeanuts) on CodePen.

ページャー領域の幅を変える

Bootstrap3と一緒にDataTablesを使用した場合、ページャー部分はBootstrapの＜div class="col-sm-7"＞で囲まれていてる。DOMをいじるオプションがあったので、ページャーの幅class="col-sm-7"を変える
DataTables DOM positioningはココ

Bootstrap3では以下のような構造になっている 


"<'row'<'col-sm-6'l><'col-sm-6'f>>"	// <1ページあたりの表示行数>

"<'row'<'col-sm-12'tr>>" 			// <テーブル本体>
"<'row'<'col-sm-5'i><'col-sm-7'p>>"	// <データ件数>
<ページャー>

DOMの構造を変えるときはこう書く 


$('#example').dataTable( {
  "dom": "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
         "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-3'i><'col-sm-9'p>>"
});

"<'row'<'col-sm-3'i><'col-sm-9'p>>"だけ書いたら、ページャーがテーブルの上に移動して、もともとあったSearchボックスとか消えた




以上

Posted by Agopeanuts