Блог

В настоящее время я работаю над веб-приложением, которое будет отображать данные в виде таблиц.

Для части этого приложения мы перечисляем текущее состояние определенных приложений. Если вы нажмете на одно из приложений в таблице, вызов ajax получит идентификатор приложения в нашей базе данных и извлечет все списки статуса для этого приложения и их дату.

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

Хотя переход обратно на первую страницу работает, и данные в таблице по-прежнему отображаются правильно, мы бы не хотели, чтобы это было проблемой. Что мы хотим сделать, так это чтобы разбивка на страницы автоматически отображала первую страницу результатов при перезагрузке таблицы.

Что мы пробовали до сих пор, так это найти триггер сброса страницы для footable, попытаться настроить таргетинг на первый элемент страницы в нижнем колонтитуле таблицы и выполнить .click (мы не смогли найти способ настроить таргетинг на него из-за того, как он сгенерирован), повторно инициализировать таблицу и найти готовую функцию в файлах javascript footable, которые мы можем использовать.

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

_{В настоящее время мы перерисовываем таблицу, чтобы исправить другую возникшую у нас проблему с разбиением на страницы.}

Текущий код:

 function getAppStats(id) {
        $.ajax({
            Async: false,
            url: '@Url.Action("GetAppStatusList", "Application", Nothing, Request.Url.Scheme)',
            type: 'POST',
            data: { id: id },
            success: function (data) {
                var label = "" 

                //The headers change on the new table, so I need to change the headers dynamically
                var newHTML = "<thead><tr><th data-toggle="true">Application</th><th>Application ID</th><th>Date</th><th>Status</th></tr></thead><tbody>"

               //Iterating through the list of statuses, and if it's not one of three values, assigning an on-click to display more data.
                $(data).each(function (index, item) {
                    if (item.status != "Created Date" amp;amp; item.status != "Inactivated" amp;amp; item.status != "Active"){
                        newHTML = newHTML   "<tr id=""   item.appId   "" onclick="getDeployComments("   item.typeId   ", "   item.appId   ")"><td id="app">"   item.name   "</td><td>"   item.appId   "</td><td id="date">"   item.date   "</td><td id="stat">"   item.status   "</td></tr>"
                    } else {
                        newHTML = newHTML   "<tr id=""   item.appId   ""><td id="app">"   item.name   "</td><td>"   item.appId   "</td><td id="date">"   item.date   "</td><td id="stat">"   item.status   "</td></tr>"
                    }

                    label = item.name   " Deployment History"
                })
                newHTML = newHTML   "</tbody><tfoot class="hide-if-no-paging"><tr><td colspan="5"><div class="pagination pagination-centered list-inline list-inline"></div></td></tr></tfoot>"

                $('#appTable').html(newHTML)

                //There's other HTML adding here, but it has nothing to do with the problem at hand.

                $('table').trigger('footable_redraw'); //Redrawing the table to fix an issue we had with pagination not showing at all.
            },
            error: function () {

            }
        })
    }
  

Одним из решений является таргетинг на ссылку на первую страницу по ее атрибуту данных и запуск события щелчка по ней:

 $('.footable-page a').filter('[data-page="0"]').trigger('click');
  

Событие FooTable redraw создает элементы разбивки на страницы, поэтому убедитесь, что это на первом месте.