jQuery DataTablesでページャーを上下に表示した場合に上のページャーをクリックすると下のページャに移動してしまう

###実現したいこと
jQuery DataTablesでページャーを上下に表示しました。
ブラウザでスクロールが出ている状態(ブラウザの表示領域に一覧が収まっていない状態)で上のページャーをクリックすると、下のページャーにスクロールしてしまいます。

下のページャーにスクロールしない方法はありますか？
または、DataTablesのイベントで呼び出されているJSの関数を知る方法があれば教えていただきたいです。

###該当のソースコード

html
1<Table id="list" Class="table table-bordered table-striped">
2    <thead>
3        <tr>
4            <th style="width:400px"> 名前</th>
5            <th style="width:35px;"> 詳細</th>
6        </tr>
7    </thead>
8    <tbody>
9	    <tr>
10	        <td>XXXX</td>
11	        <td class="text-center"><Button type="button" name="key" class="btn btn-primary">詳細</Button></td>
12	    </tr>
13    </tbody>
14</Table>

JavaScript
1    // DataTable設定
2    $('#list').DataTable({
3        "paging": true,
4        "lengthChange": false,
5        "searching": false,
6        "ordering": false,
7        "info": true,
8        "autoWidth": false,
9        "stateSave": true,
10        "language": {
11            "emptyTable": "",
12            "info": "_TOTAL_ 件中 _START_ ～ _END_ 件",
13            "infoEmpty": "",
14            "infoFiltered": "(_MAX_ 件からの絞り込み表示)",
15            "infoPostFix": "",
16            "thousands": ",",
17            "lengthMenu": "_MENU_件表示",
18            "loadingRecords": "ロード中",
19            "processing": "処理中...",
20            "search": "検索",
21            "zeroRecords": "",
22            "paginate": {
23                "first": "先頭",
24                "previous": "前へ",
25                "next": "次へ",
26                "last": "末尾"
27            },
28        },
29        "pageLength": 10,
30        "sDom": '<"datatables-header"pi>rt<"datatables-footer"pi>' //ここでページャーを上下に表示しています。
31    });

css
1.datatables-header .dataTables_info,
2.datatables-footer .dataTables_info,
3.datatables-header .dataTables_length,
4.datatables-header .dataTables_filter {
5    float: right;
6}
7.datatables-header .dataTables_paginate,
8.datatables-footer .dataTables_paginate {
9    float: left;
10}
11.datatables-header .dataTables_filter {
12    margin-left: 40px;
13}
14.datatables-header .dataTables_info,
15.datatables-footer .dataTables_info {
16    margin-top: 5px;
17    margin-right: 10px;
18}
19.datatables-footer .dataTables_paginate {
20    margin-bottom: 0;
21    margin-top: -5px;
22}

m.ts10806

2017/06/14 04:48 編集

DataTablesを適用しているHTMLもご提示ください。

psis

2017/06/14 05:43

htmlを追記しました。動的に生成しているため実際は<tr>間が複数並ぶ形となります。

行動規範の内容に同意します

回答2件

自己解決

matsu1006さんのコードと見比べてみたところ、
以下2点相違がありました。

・jquery.dataTables.jsのバージョンが異なっている
・dataTables.bootstrap.jsを使用している

結論としてはdataTables.bootstrap.jsが古かったのが原因で
最新版を使用したところ修正されました。

投稿2017/06/14 07:18

psis

総合スコア15

m.ts10806

2017/06/14 07:19

あるあるですね。ざっくり検証が役に立って解決したようで何よりです。

psis

2017/06/14 07:21

提示していない箇所での問題で申し訳ありませんでした。matsu1006さんのお陰で気づくことが出来き感謝しております。ありがとうございました。

行動規範の内容に同意します

ご提示いただいたコードほぼそのままで下記のようなコードで試しましたが、再現しませんでした。
jQueryも1,2,3それぞれ試しましたが正常に動作しています。
バージョン等や組み方の違いはありますでしょうか？
また、そちらの方はjavascriptのエラーか何か出ていませんか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8"/>
5  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6  <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
7  <title>Table</title>
8  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.15/datatables.min.css"/>
9<style>
10
11.datatables-header .dataTables_info,
12.datatables-footer .dataTables_info,
13.datatables-header .dataTables_length,
14.datatables-header .dataTables_filter {
15    float: right;
16}
17.datatables-header .dataTables_paginate,
18.datatables-footer .dataTables_paginate {
19    float: left;
20}
21.datatables-header .dataTables_filter {
22    margin-left: 40px;
23}
24.datatables-header .dataTables_info,
25.datatables-footer .dataTables_info {
26    margin-top: 5px;
27    margin-right: 10px;
28}
29.datatables-footer .dataTables_paginate {
30    margin-bottom: 0;
31    margin-top: -5px;
32}
33</style>
34
35</head>
36<body>
37<Table id="list" Class="table table-bordered table-striped">
38    <thead>
39        <tr>
40            <th style="width:400px"> 名前</th>
41            <th style="width:35px;"> 詳細</th>
42        </tr>
43    </thead>
44    <tbody>
45        <tr>
46            <td>XXXX</td>
47            <td class="text-center"><Button type="button" name="key" class="btn btn-primary">詳細</Button></td>
48        </tr>
49   ～～～～～
50    </tbody>
51</Table>
52<script
53  src="https://code.jquery.com/jquery-1.12.4.js"
54  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
55  crossorigin="anonymous"></script>
56
57<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.15/datatables.min.js"></script>
58<script>
59
60// DataTable設定
61$('#list').DataTable({
62    "paging": true,
63    "lengthChange": false,
64    "searching": false,
65    "ordering": false,
66    "info": true,
67    "autoWidth": false,
68    "stateSave": true,
69    "language": {
70        "emptyTable": "",
71        "info": "_TOTAL_ 件中 _START_ ～ _END_ 件",
72        "infoEmpty": "",
73        "infoFiltered": "(_MAX_ 件からの絞り込み表示)",
74        "infoPostFix": "",
75        "thousands": ",",
76        "lengthMenu": "_MENU_件表示",
77        "loadingRecords": "ロード中",
78        "processing": "処理中...",
79        "search": "検索",
80        "zeroRecords": "",
81        "paginate": {
82            "first": "先頭",
83            "previous": "前へ",
84            "next": "次へ",
85            "last": "末尾"
86        },
87    },
88    "pageLength": 10,
89    "sDom": '<"datatables-header"pi>rt<"datatables-footer"pi>'
90});
91</script>
92
93</body>
94</html>
95
96