Hi,
I’ve noticed in my own implementation and also on the documentation implementation that when you rapidly click the next row button, the last row displayed in the pagination text will frequently display as a question mark instead of the actual value. Is this a known bug? I don’t have this issue when using React-Ag-Grid.
My current workaround is to create my own pagination buttons, but it’s not ideal to do this.
Infinite Row Model (Server-Side) | Dash for Python Documentation | Plotly
See in the below screenshot (901 to ? of 8,618):
Hello @fenderstrat928,
Welcome to the community!
This is more than likely an issue with the difference between the two examples. Plotly is using a real server, while the other is using a clientside example server. Even with infinite (free) version, Plotly is using a server callback.
Hitting the button more frequently seems to be spamming the server with requests, so they are probably stacking up. You could probably handle these requests in an async manner to keep up with the requests. 
1 Like
Thank you so much, this is the first time I’ve ever had to use a clientside callback so I didn’t even consider that. I was able to use the following to resolve my issue:
clientside_callback(
"""
function(request) {
if (!request) {
return window.dash_clientside.no_update;
}
const startRow = request.startRow;
const endRow = request.endRow;
var xhr = new XMLHttpRequest();
xhr.open('GET', `http://127.0.0.1:5000/dash/data?startRow=${startRow}&endRow=${endRow}`, false);
xhr.send();
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
// If no records are returned, we need to force this response or the component will break
if (data.rowCount === 0) {
return { rowData: [{}], rowCount: 1 };
}
return { rowData: data.rowData, rowCount: data.rowCount };
} else {
// API Call failed
return { rowData: [{}], rowCount: 1 };
}
}
""",
Output("infinite-row-model-pagination", "getRowsResponse"),
Input("infinite-row-model-pagination", "getRowsRequest"),
)
1 Like