Category: Appsmith Support
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

List Widget Pagination

Issue

I am encountering an issue with the List widget in Appsmith. When I navigate to the next page and there are no results, the widget displays a blank white box and I lose the ability to go back to the previous page. I am not sure if this is a bug or a configuration issue. I have provided screenshots of my query and widget properties for further assistance.

Resolution

The issue with the List widget not allowing the user to navigate to the previous page when there are no results is due to a missing feature in the widget. Currently, the Total Record Count property is only available for the Table widget, but there is a feature request on the roadmap for the List widget. As a workaround, create a button that resets the List widget and re-runs the query.

To implement this, create a button and add an onClick action to it. In the action, set the value of the query variable to “” and call the run function of the query that fetches the data for the List widget.

For example, in the onClick action of the button, add the following code:

$w(" ").value = ''; //set the query variable value to an empty string
wixData.query("MyCollection") //replace MyCollection with your collection name
.find()
.then(results => {
$w(" ").data = results.items; //replace with your List widget ID
})

This will reset the List widget and re-run the query to fetch the data. The user can then navigate back to the previous pages of the List widget.