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

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 来在页面加载后更改数据表中按钮的 class：

 <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

您需要为您的 table 收听 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).

中删除相同的代码块

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

const table = $('#dataTable').DataTable({
    drawCallback: function(settings) {
        // changes in here
    }
});

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

Javascript does not work in the second page of a data table

javascript

jquery

datatables

jquery-events

symfony-2.8