将自定义 class 添加到 jquery 数据表中的分页 ul

Question

我正在尝试将自定义 css 添加到 jquery 数据表 (https://datatables.net/)。

我真的需要一些关于分页的帮助。我正在使用 sDom 属性制作必要的 div，以使信息和分页看起来像在购买的模板中一样。

我的信息部分可以正常工作，但我无法删除（或不知道如何删除）分页 ul 上有一个烦人的 16 像素边距底部。我会附上一张我试图展示问题的图片。

这是当前的sDom：

sDom:`tr
<"d-sm-flex justify-content-sm-between align-items-sm-center mt-4 mt-sm-3"
<"mb-sm-0 text-center text-sm-start text-success"
i>
<"mb-sm-0 d-flex justify-content-center"
<"pagination pagination-sm pagination-bordered mb-0"
p>>>`,

请提供一些帮助，谢谢！

*编辑：这是创建数据表的js:

$('#post_table').DataTable({
    order: [['0', 'asc']],
    responsive: true,
    ordering: true,
    sDom:`tr
    <"d-sm-flex justify-content-sm-between align-items-sm-center mt-4 mt-sm-3"
    <"mb-sm-0 text-center text-sm-start text-success"
    i>
    <"mb-sm-0 d-flex justify-content-center"
    <"pagination pagination-sm pagination-bordered mb-0"
    p>>>`,
    searching: true,
    paging: true,
    pagingType: "simple_numbers",
    language: {
        paginate: {
            previous: 'Prev',
        },
        info: "Showing _START_ to _END_ of _MAX_ posts", // without filter
    },
    displayLength: 10
});

这是页面中的HTML：

<div class="table-responsive border-0">
    <table class="table align-middle p-4 mb-0 table-hover table-shrink" id="post_table">
        <thead class="table-dark">
            <tr>
                <th scope="col" class="border-0 rounded-start">#</th>
                <th scope="col" class="border-0">Title</th>
                <th scope="col" class="border-0">Author Name</th>
            </tr>
        </thead>

        <tbody class="border-top-0">
            <tr>
                <td>1</td>
                <td><h6 class="course-title mt-2 mt-md-0 mb-0">Test title</h6></td>
                <td><h6 class="course-title mt-2 mt-md-0 mb-0">Test author</h6></td>
            </tr>
        </tbody>
    </table>
</div>

我制作这个 jsfiddle 是为了提供一个可重现的示例，但正如我测试过的那样，在默认 bootstrap 5 加载的情况下它工作正常。遗憾的是，我无法将整个模板上传到站点以进行全面检查。请让我知道这些信息是否可以解决。如果没有，那么我会删除问题并尝试自己弄清楚。

Answer 1

看你的jsfiddle，边距来自Bootstrap5 CSS规则：

所以它在我看来非常简单，您可以使用自己的 CSS 规则**覆盖** Boostrap 规则。

// add myCustomClass to the pagination element
sDom:`tr
    <"d-sm-flex justify-content-sm-between align-items-sm-center mt-4 mt-sm-3"
    <"mb-sm-0 text-center text-sm-start text-success"
    i>
    <"mb-sm-0 d-flex justify-content-center"
    <"pagination pagination-sm pagination-bordered mb-0 myCustomClass" // <= myCustomClass
    p>>>`




/* then, add CSS rule for ul.pagination child of .myCustomClass */
.myCustomClass ul.pagination {
  margin-bottom: 0 !important;
}

也就是说，我个人觉得有底边距比没有底边距要好得多:)

将自定义 class 添加到 jquery 数据表中的分页 ul

Add custom class to pagination ul in jquery datatable

datatable

jquery

datatables