Javascript не работает на второй странице таблицы данных - PullRequest
Новая
       115

Javascript не работает на второй странице таблицы данных

0 голосов
/ 08 октября 2019

На самом деле я работаю со следующими данными:
Datatable 

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');
        });

Работает правильно, но только на первой странице таблицы данных, на других страницах не работает.

Любойидея или предмет как это исправить или что не так?

1 Ответ

0 голосов
/ 08 октября 2019

Вам нужно прослушать событие 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');
});

При этом вы также можете удалить тот же блок кода из `$ (документ).

Вы также можете поместить все это в обратный вызов отрисовки для своей таблицы данных, если вы предпочитаете: 

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