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() {&nbsp; &nbsp; $(".auditButton.Submitted").removeClass('btn-outline-primary');&nbsp; &nbsp; $(".auditButton.Submitted").addClass('btn-outline-success');&nbsp; &nbsp; $(".auditButton.Expired").addClass('btn-outline-danger');&nbsp; &nbsp; $(".auditButton.Capturable").addClass('btn-outline-warning');});这样做，您还可以从 $(document) 中删除相同的代码块。如果您愿意，您还可以将所有这些放在数据表的绘制回调中：const table = $('#dataTable').DataTable({&nbsp; &nbsp; drawCallback: function(settings) {&nbsp; &nbsp; &nbsp; &nbsp; // changes in here&nbsp; &nbsp; }});