Bootstrap 数据表分页显示在新行中

Question

我正在使用带有 bootstrap 4.3.1 的数据表。我在css和js下面集成了

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" />

我正在使用 html5 按钮导出到 excel 和其他自定义按钮。

分页总是显示在页脚条目信息的新行中，如下所示

我已经尝试以所有可能的方式更改 css 和 js 的顺序，但没有任何效果。

HTML 代码：

<div class="col-lg-8">
    <table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>L</th>
                <th>W</th>
                <th>H</th>
                <th>W</th>
                <th>N</th>
                <th>Y</th>
                <th>P</th>
                <th>Pr</th>
            </tr>
        </thead>
        <tbody id="tbl">
            <tr>
                <td>12</td>
                <td>11</td>
                <td>14</td>
                <td>61</td>
                <td>1</td>
                <td>2019</td>
                <td>abc</td>
                <td>320800</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>L</th>
                <th>W</th>
                <th>H</th>
                <th>W</th>
                <th>N</th>
                <th>Y</th>
                <th>P</th>
                <th>Pr</th>
          </tr>
        </tfoot>
    </table>
</div>

JS代码：

$(document).ready(function () {
        for (var i = 0; i < 99; i++) {
            $('#tbl').append("<tr><td>" + i + "2</td><td>1" + i + "</td><td>" + i + "4</td><td>6" + i + "</td><td>1</td><td>2019</td><td>abc</td><td>32080" + i + "</td></tr>");
        }
        $('#example').DataTable({
            dom: 'Bfrtip',
            lengthMenu: [
               [10, 25, 50, -1],
               ['10 rows', '25 rows', '50 rows', 'Show all']
            ],
            buttons: [
            {
                text: 'Show Radar Chart',
                action: function (e, dt, node, config) {
                    $('#chartModal').modal('show');
                }
            },
            {
                extend: 'excelHtml5',
                text: 'Export to Excel'
            },
            "pageLength"
            ]
        });
    });

循环只是通过重复数据来填充表格。

Answer 1

$(document).ready(function () {
        for (var i = 0; i < 99; i++) {
            $('#tbl').append("<tr><td>" + i + "2</td><td>1" + i + "</td><td>" + i + "4</td><td>6" + i + "</td><td>1</td><td>2019</td><td>abc</td><td>32080" + i + "</td></tr>");
        }
        $('#example').DataTable({
            dom: 'Bfrtip',
            lengthMenu: [
               [10, 25, 50, -1],
               ['10 rows', '25 rows', '50 rows', 'Show all']
            ],
            buttons: [
            {
                text: 'Show Radar Chart',
                action: function (e, dt, node, config) {
                    $('#chartModal').modal('show');
                }
            },
            {
                extend: 'excelHtml5',
                text: 'Export to Excel'
            },
            "pageLength"
            ]
        });
    });

#example_info, .dataTables_paginate {
    width: 50%;
    display: inline-block;
}

#example_info.dataTables_info {
    padding-top: 1.3em !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" />



<div class="col-lg-8">
    <table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>L</th>
                <th>W</th>
                <th>H</th>
                <th>W</th>
                <th>N</th>
                <th>Y</th>
                <th>P</th>
                <th>Pr</th>
            </tr>
        </thead>
        <tbody id="tbl">
            <tr>
                <td>12</td>
                <td>11</td>
                <td>14</td>
                <td>61</td>
                <td>1</td>
                <td>2019</td>
                <td>abc</td>
                <td>320800</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>L</th>
                <th>W</th>
                <th>H</th>
                <th>W</th>
                <th>N</th>
                <th>Y</th>
                <th>P</th>
                <th>Pr</th>
          </tr>
        </tfoot>
    </table>
</div>

尝试添加以下 css 将帮助您获得所需的结果。

#example_info, .dataTables_paginate {
    width: 50%;
    display: inline-block;
}
div#example_paginate {
    padding-top: 0.85em;
}