Javascript 在数据表的第二页中不起作用

Question

实际上我正在使用以下数据表：Data Table code:<table aria-describedby="dataTable_info" cellspacing="0" class="table table-hover dataTable" id="dataTable" role="grid" style="width:100%;" width="100%">        <thead>            <tr>                <th>{{'fsaGeneralPlan.table.Auditors'|trans({}, 'FSABundle')}}</th>                <th>{{'fsaGeneralPlan.table.Audits'|trans({}, 'FSABundle')}}</th>                <th>{{'fsaGeneralPlan.table.Areas'|trans({}, 'FSABundle')}}</th>            </tr>        </thead>        <tbody>            {% for audit in auditsByArea %}            {% set myArray = audit.Audits|split(',') %}            {% set AuditsStatus = audit.AuditsStatus|split(',') %}                    <tr>                        <td>{{ audit.Auditor }}</td>                        <td>                        {# {% set long = numberOfAudits|length + 2  %} #}                        {# <h1>{{ long }}</h1> #}                            {% for i in 0..3 %}                            {% set e = i + 1 %}                            <a  title="{{ AuditsStatus[i] }}" class="btn btn-outline-primary btn-sm auditButton {{ AuditsStatus[i] }}" data-id="Audit{{ myArray[i] }}" data-area="{{ audit.area_name }}"  data-status="{{ AuditsStatus[i] }}" id="auditButton{{ myArray[i] }}" name="auditButton">{{'w' ~ e }}</a>                            {# <input  class ="auditButton {{ AuditsStatus[i] }} mx-2" value="{{'W' ~ i }}" href="" data-id="Audit{{ myArray[i] }}" data-area="{{ audit.area_name }}" data-status="{{ AuditsStatus[i] }}" id="auditButton{{ myArray[i] }}" name="auditButton" type='text' readonly ></input> #}                            {% endfor %}                        </td>                        <td>{{ audit.area_name }}</td>                    </tr>             {% endfor %}        </tbody>    </table>一旦页面加载，我有这个 Javascript 来更改数据表中按钮的类：它工作正常，但仅在数据表的第一页中，在其他页面中不起作用。关于如何修复它或出了什么问题的任何想法或主题？

Answer 1

您需要draw为您的桌子监听事件。

为什么？您当前的设置适用于第一页，因为这些元素在$(document).ready()触发时都会呈现。但是，其他页面会在文档准备好后呈现。

尝试：

const table = $('#dataTable').DataTable();

// Event listener for DT 1.10+

table.on('draw', function() {

    $(".auditButton.Submitted").removeClass('btn-outline-primary');

    $(".auditButton.Submitted").addClass('btn-outline-success');

    $(".auditButton.Expired").addClass('btn-outline-danger');

    $(".auditButton.Capturable").addClass('btn-outline-warning');

});

这样做，您还可以从 $(document) 中删除相同的代码块。

如果您愿意，您还可以将所有这些放在数据表的绘制回调中：

const table = $('#dataTable').DataTable({

    drawCallback: function(settings) {

        // changes in here

    }

});