таблицы данных, нумерация страниц и выбор строк

Question

У меня есть приложение, которое использует таблицу данных с нумерацией страниц. Пользователь выбирает строку в таблице, а отчет отображается под таблицей. Пользователь может редактировать отчет. Если пользователь пытается выбрать другую строку в таблице без сохранения ожидающих изменений, он получает предупреждение и получает возможность go вернуться к ранее выбранной строке и сохранить изменения или перейти к следующей строке. Это прекрасно работает, если обе строки отображаются на одной странице таблицы. См. Bootstrap Модальные и таблицы данных. net

Однако, если у пользователя есть несохраненные правки и вместо выбора другой строки на той же странице, пользователь сначала выбирает другую страницу и получает предупреждение и решает вернуться к редактируемой строке, это не работает цитата, как я хотел бы. В этом случае пользователь успешно возвращается на предыдущую страницу, его правки (в отчете) по-прежнему отображаются под таблицей, но я не могу понять, как отобразить ранее выбранную строку как выбранную (хотя строка выглядит как выбранный класс).

Вот HTML для модального диалога

<input type="hidden" name="save_pending_changes" id="save_pending_changes" value="false"/>
<!-- Modal -->
<div class="modal fade" id="pendingChanges" tabindex="-1" role="dialog" aria-labelledby="pendingChangesLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="pendingChangesLabel">You have unsaved changes</h3>
      </div>
      <div class="modal-body">
        <p>
            <strong>Are you sure you want to leave?</strong>
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="saveChanges(true)">No</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saveChanges(false)">Yes</button>
      </div>
    </div>
  </div>
</div>

Вот JavaScript

function saveChanges(save) {
    $('#save_pending_changes').val(save);
}

dt_table.on('click', 'tr', function(e) {
    var oldRow = getCurrentRow();
    determine(this).then(function(result) {
        var enabled = result['enabled'];
        var tr = result['tr'];
        if (enabled) {
            showModal().then(function(save) {
                if (save == 'true') {
                    //keep selection on previously selected row
                    setSelection(oldRow);
                }
                else {
                    select(tr);
                }
            })
        }
        else {
            select(tr);
        }
    })
})

//determine if modal should be displayed
function determine(tr) {
    return new Promise(function(resolve) {
        //check to see if user has any pending changes
        var saveButton = document.getElementById('saveBtn');
        var enabled = false;
        if (saveButton) {
            enabled = !saveButton.disabled;
        }
        var result = {};
        result['enabled'] = enabled;
        result['tr'] = tr;
        resolve(result);
    })
}

//show modal
function showModal() {
    return new Promise(function(resolve) {
        $('#pendingChanges button').one('click', function(e) {
            var save_pending_changes = $('#save_pending_changes').val();
            resolve(save_pending_changes);
        })
        $('#pendingChanges').modal({
            backdrop: 'static',
            keyboard: false
        })
    })
}

function getCurrentRow() {
    return (dt_table.$('tr.selected'));
}

function setSelection(row) {
    //first unselect any other selected row
    dt_table.$('tr.selected').removeClass('selected');

    //then select row
    row.addClass('selected');
}

function select(tr) {
    //first unselect any other selected row
    dt_table.$('tr.selected').removeClass('selected');

    //then select row of interest
    $(tr).addClass('selected');

    var rowIndices = dt_table.row('.selected')[0];
    selectedRowIndex = rowIndices[0];

    //set hidden param
    $('#selectedRowIndex').val(selectedRowIndex);

    var row = dt_table.rows(rowIndices);

    if (row.data().length == 0) {
        //e.preventDefault();
        return;
    }
    var id = row.data()[0]['id'];
    var url = '/report/' + id + '/';
    $('#notes_display').load(url +  ' #notes_display');
}

//search event handler
dt_table.on('search.dt', function () {
   clearSelectedReports();
});

//page event handler (when paging)
dt_table.on('page.dt', function () {
    var info = dt_table.page.info();
    var newPageIndex = info.page;
    var state = dt_table.state();
    var delta = (info.start-state.start)/state.length;
    var indexToReturn = Math.floor(Math.abs(newPageIndex - delta) );

    var oldRow = getCurrentRow();
    dt_table.$('tr.selected').removeClass('selected');   //need this here

    determine(this).then(function(result) {
        var enabled = result['enabled'];
        if (enabled) {
            showModal().then(function(save) {
                if (save == 'true') {
                    //return to previous page
                    dt_table.page(indexToReturn).draw('page');   //use page param so search doesn't get updated and trigger a search event

                    //set selection on previously selected row
                    setSelection(oldRow);
                }
                else {
                    clearSelectedReports();
                }
            })
        }
        else {
            clearSelectedReports();
        }
    })
});

function clearSelectedReports() {
    var url = '/empty/';
    $('#notes_display').load(url +  ' #notes_display');
}

Есть предложения?