如何在数据表分页中给边距顶部？

Question

我想在图片中的黄色区域中显示一个间距，例如分页的顶部边距（previous/next 水平滚动条的边距）。这可能使用数据表变量还是使用 css ？如果可以，我该如何实现？

下面我展示了 php 代码和 javascript 代码。

<div class="card border-light shadow-sm my-4">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="data-table" style="width:100%;"
                                class="table table-centered table-nowrap mb-0 rounded nowrap">
                                <thead class="thead-light">

                                    <tr>
                                        <th class="border-0">Sl No.</th>
                                        <th class="border-0">Apartment Name</th>
                                        <th class="border-0">Address (Short)</th>
                                        <th class="border-0">Address (Full)</th>
                                        <th class="border-0">Landmark</th>
                                        <th class="border-0">Pincode</th>
                                      
                                    </tr>
                                </thead>
                                <tbody>


                                    <?php 
                                    include '../../php/connection.php';

                                    $query = "SELECT * FROM info";
                                    $stmt=$dbcon->prepare($query);
                                    $stmt->execute();
                                    $count = $stmt->rowCount();
                                    $datas=$stmt->fetchAll(PDO::FETCH_ASSOC);
                                    foreach ($datas as $key => $data)
                                    {
                            ?>
                                    <!-- Item -->
                                    <tr>
                                        <td class="border-0">
                                            <?php echo $key+1 ; ?>
                                        </td>
                                        <td class="border-0">
                                            <?php echo $data['apartment_name']; ?>
                                        </td>
                                        <td class="border-0">
                                            <?php echo $data['addr_short']; ?>
                                        </td>
                                        <td class="border-0">
                                            <?php echo $data['addr_full']; ?>
                                        </td>
                                        <td class="border-0">
                                            <?php echo $data['landmark']; ?>
                                        </td>
                                        <td class="border-0">
                                            <?php echo $data['pincode']; ?>
                                        </td>
                                        

                                    </tr>
                                    <!-- End of Item -->

                                    <?php      
                                }
                            ?>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

js代码-

<script>
$(document).ready(function() {
    $('#data-table').DataTable({
        "scrollX": true
    });
});
</script>

-谢谢

Answer 1

如果您想稍微向下移动分页控件，可以使用 DataTables dom 选项将控件放置在自定义 <div> 中。您可以给 <div> 一个 class 名称，然后为其附加样式。

默认 dom 值为：

"dom": 'lfrtip'

每个字母代表一个控件（例如 t 是 table 本身；p 是分页）。

我们可以将默认值更改为：

"dom": 'lfrti<"bottom-wrapper"p>'

这将 p 包装在 div 中。

div 可以随心所欲地设置样式 - 例如：

<style>
  .bottom-wrapper {
      margin-top: 0.5em;
  }
</style>

如果您希望同时调整信息和分页控件，则将 i 放在 div 中：

"dom": 'lfrt<"bottom-wrapper"ip>'

更新搜索框评论：

查看 dom 文档，搜索框由字母 f 表示（用于过滤输入）。

所以，你把它放在 <div> 中并给它自己的 class 名称：

"dom": 'l<"top-wrapper"f>rti<"bottom-wrapper"p>'

现在字母 f 被换行：<"top-wrapper"f>

我想你想稍微向上移动，所以样式可以是：

.top-wrapper {
    margin-bottom: 0.5em;
}

如何在数据表分页中给边距顶部？

How to give margin top in datatable pagination?

css

datatable

datatables