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来更改数据表中按钮的类：

 <script type="text/javascript">
        $(document).ready(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');
        });

它可以正常工作，但仅在数据表的第一页中，而在其他页面中则无效。

关于如何解决它或有什么问题的任何想法或主题？

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).ready()中删除相同的代码块。