I'm currently working on a web application that will display data in tables.

For part of this application, we're listing the current status of certain applications. If you click on one of the applications in the table, an ajax call grabs the application's ID in our database and pulls all status listings for that application, and their date.

While this all works fine and dandy, our issue es in the form of pagination. If you navigate to the second page of the first table, the table with the current status of each application, and click on an application with more than five status listings (our data-page-size is limited to 5) then the second table will start on the second page of data.

While navigating back to the first page works, and the data in the table is still properly displayed, it's an issue we'd like not to have. What we want to do is have the pagination automatically display the first page of results on table reload.

What we've tried so far is finding a page-reset trigger for footable, trying to target the first page item in the table footer and do a .click (We couldn't find a way to target it due to how it's generated), re-initializing the table, and finding a pre-made function in the footable javascript files that we can use.

What I want to know is, is there a way to set the pagination to display page one on table redraw?

_{Currently, we're redrawing the table to fix another pagination issue we had.}

The 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's 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'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 () {

            }
        })
    }

I'm currently working on a web application that will display data in tables.

For part of this application, we're listing the current status of certain applications. If you click on one of the applications in the table, an ajax call grabs the application's ID in our database and pulls all status listings for that application, and their date.

While this all works fine and dandy, our issue es in the form of pagination. If you navigate to the second page of the first table, the table with the current status of each application, and click on an application with more than five status listings (our data-page-size is limited to 5) then the second table will start on the second page of data.

While navigating back to the first page works, and the data in the table is still properly displayed, it's an issue we'd like not to have. What we want to do is have the pagination automatically display the first page of results on table reload.

What we've tried so far is finding a page-reset trigger for footable, trying to target the first page item in the table footer and do a .click (We couldn't find a way to target it due to how it's generated), re-initializing the table, and finding a pre-made function in the footable javascript files that we can use.

What I want to know is, is there a way to set the pagination to display page one on table redraw?

_{Currently, we're redrawing the table to fix another pagination issue we had.}

The 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's 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'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 () {

            }
        })
    }

• javascript
• jquery
• footable

1 Answer 1

One solution is to target the first page link by its data attribute and trigger a click event on it:

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

The FooTable redraw event creates the pagination elements, so make sure that es first.