如何将类添加到 DataTables 表包装器？答案

【问题标题】：How to add classes to DataTables table wrapper?如何将类添加到 DataTables 表包装器？
【发布时间】：2022-12-01 01:16:25
【问题描述】：

DataTables 将表包装在 div 中，并将 dataTables_wrapper 作为类。因此，做：

<table
        id="my-wonderful-list"
        class="table table-dark-gray table-hover w-100"
>
    <thead class="table-dark">
    <tr>
        <th class="border-0">First column</th>
        <th class="border-0">Second column</th>
    </tr>
    </thead>
</table>

$(function () {
    let supportTable = $('#my-wonderful-list').DataTable({
        // options here
    });
});

结果是：

<div id="my-wonderful-list_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
    <table id="my-wonderful-list" class="table table-dark-gray table-hover w-100 dataTable no-footer dtr-inline" style="width: 1202px;">
        <thead class="table-dark">
            <tr>
                <th class="border-0 sorting sorting_desc" tabindex="0" aria-controls="my-wonderful-list" rowspan="1" colspan="1" style="width: 194px;" aria-label="First column: activer pour trier la colonne par ordre croissant" aria-sort="descending">
                    First column
                </th>
                <th class="border-0 sorting" tabindex="0" aria-controls="support-list" rowspan="1" colspan="1" style="width: 137px;" aria-label="Second column: activer pour trier la colonne par ordre croissant">
                    Second column
                </th>
        </thead>
        <tbody>
            <!-- table body -->
        </tbody>
    </table>
<div>

如何更改包装类以将我自己的类添加到其中？

【问题讨论】：

标签： javascript html jquery datatables

【解决方案1】：

您可以使用 $.fn.dataTableExt.oStdClasses.sWrapper 来指定您想要在包装器上使用的类。你需要把它放在你的 DataTable 配置之上：像这样：

$(function () {
    $.fn.dataTableExt.oStdClasses.sWrapper = "your-custom-class1 your-custom-class2";
    let supportTable = $('#my-wonderful-list').DataTable({
        // options here
    });
});

它将导致：

<div id="my-wonderful-list_wrapper" class="table-responsive border-0 rounded-3 no-footer">
    <table id="my-wonderful-list" class="table table-dark-gray table-hover w-100 dataTable no-footer dtr-inline" style="width: 1202px;">
        <thead class="table-dark">
            <tr>
                <th class="border-0 sorting sorting_desc" tabindex="0" aria-controls="my-wonderful-list" rowspan="1" colspan="1" style="width: 194px;" aria-label="First column: activer pour trier la colonne par ordre croissant" aria-sort="descending">
                    First column
                </th>
                <th class="border-0 sorting" tabindex="0" aria-controls="support-list" rowspan="1" colspan="1" style="width: 137px;" aria-label="Second column: activer pour trier la colonne par ordre croissant">
                    Second column
                </th>
        </thead>
        <tbody>
            <!-- table body -->
        </tbody>
    </table>
<div>

请注意，某些类已被删除，在本例中为 dataTables_wrapper 和 dt-bootstrap5。

【讨论】：