jQueryのDataTablesとMagnific Popupの併用と横スクロールについて。

Question

DataTables
https://datatables.net/

Magnific Popup
http://dimsemenov.com/plugins/magnific-popup/

$(document).ready(function(){
	$('#TestTable').DataTable({
		"language": { "url": "Japanese.json"},
		"bInfo": false,
		"bProcessing": true,
		"ajax": "test.json",
		"columns": [
			{ "data": "id" },
			{ "data": "name" },
			{ "data": "img" },
			{ "data": "txt" },
		],
		"columnDefs": [ {
			  "targets": [2,3],
			  "orderable": false
		} ]
	});
});

実際は動物ではありませんしもっと長いですが、test.jsonの中身はこうです。

{
  "data": [
	{
		"id": "1",
		"name": "いぬ",
		"img": "<a href=\"animal/inu.jpg\" class=\"popup\"><img src=\"animal/inu.jpg\"></a>",
		"txt": "いぬいぬいぬいぬいぬ",
	},
	{
		"id": "2",
		"name": "ねこ",
		"img": "<a href=\"animal/neko.jpg\" class=\"popup\"><img src=\"animal/neko.jpg\"></a>",
		"txt": "ねこねこねこねこねこ",
	}
]
}

<div class="ScrollArea">
	<table id="TestTable">
		<thead><tr><th>id</th><th>name</th><th>sample1</th><th>sample2</th></tr></thead>
		<tbody></tbody>
	</table>
</div>

.ScrollArea は overflow-x:auto です。
表示はちゃんとできるのですが、ページャーの下にスクロールバーが出てきてしまいます。
オプションの "scrollX": true を使った時と同じようにしたいです。
("scrollX": trueを使うとtheadとtbodyがズレるので使えません)
datatables.js に直接『<div class="ScrollArea">』『</div>』を書けばできるのだと思うのですが、どこにどうやって書いたら良いのか分かりません。
javascript document.write でフィルターの下に『<div class="ScrollArea">』を、ページャーの上に『</div>』を書いたらページの読み込みが終わらず真っ白になってしまったので、間違っていますよね...。

Magnific Popupの方は、DataTablesを使わない場合は普通に動きますので、併用ができないのでしょうか？

どちらか一方でも分かる方がみえましたら、お知恵を拝借願えませんでしょうか。
よろしくおねがいいたします。

Comments

[退会済みユーザー]

DataTablesにスクロール関連のプラグインつかわなかったのか

[退会済みユーザー]

https://datatables.net/examples/basic_init/scroll_x.html

[saya_0825]

ありがとうございます。ですが質問に書いた通り、"scrollX"を使うとずれるので使えないです。テーブルの幅は固定ではないからだと思うのですが、可変でないとダメなので諦めます。

Answer 1

独自スクロールの設定をしたいなら

https://datatables.net/reference/option/dom

これかな

簡単な説明

"<'row'<'col-sm-6'l><'col-sm-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",

は

<div class="row">
    <div class="col-sm-6">表示件数用パーツ</div>
    <div class="col-sm-6">検索</div>
</div>
<div class="row">
    <div class="col-sm-12">テーブル</div>
</div>
<div class="row">
    <div class="col-sm-6">件数</div>
    <div class="col-sm-6">ページネーション</div>
</div>

に展開されるんです。

つまり

< は <DIV>
> は </DIV>
'row' のように ' で囲まれたものは DIV の class 属性、CSS セレクタ方式で ID/CLASS を両方付与可能（一つ前のDIVに影響する）

---

l は 表示件数
f は 検索フォーム
t はテーブル（データ）
r は処理中表示
p はページネーション
i はデータ情報（ ｎ件目～ｎ件目を表示等 ）

Comments

[saya_0825]

ありがとうございます。
日本語に訳して読んでも、ちょっと意味がわからなかったので、DataTablesを使うのはやめにします。
すみませんでした。

[退会済みユーザー]

意訳の補足を追加した