Reset pagination to reload or redraw

Question

I am currently working on a web application that displays data in tables.

For part of this application, we list the current status of specific applications. If you click on one of the applications in the table, the ajax call captures the application identifier in our database and pulls out all the status lists for this application and their date.

While everything works fine and dandy, our problem arises in the form of pagination. If you go to the second page of the first table, the table with the current status of each application and click the application with more than five lists of states (the size of our data page is limited to 5), then the second table will start from the second data page.

While navigating the first page, and the data in the table is still displayed correctly, this is a problem that we would like to not have. We want the page to be automatically displayed on the first page of results when the table is reloaded.

So far, we have tried to find the reset page trigger for giveaway, trying to target the first element of the page in the footer of the table and make .click (we could not find a way to target it as it was generated), reinitializing the table and searching for the previously created function in the basic javascript files we can use.

What I want to know is there a way to set the pagination to display page 1 on the table redrawing?

_{We are currently redrawing the table to fix another pagination problem.}

Current code:

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 not one of three values, assigning an on-click to display more data.
                $(data).each(function (index, item) {
                    if (item.status != "Created Date" && item.status != "Inactivated" && 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 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 () {

            }
        })
    }

Answer 1

:

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

FooTable redraw , , .