I have an application that uses a datatable with pagination. The user selects a row in the table and a report is displayed below the table. The user may edit the report. If the user attempts to select another row in the table without saving any pending edits, they are warned and given the chance to go back to the previously selected row and save the changes or continue to the next row. This works great if both rows are displayed in the same page of the table.
However, if user has unsaved edits and instead of selecting another row in the same page, the user selects another page. The user then receives the warning and decides to return to the row being edited, it's not working quite the way I'd like. In this case, the user is successfully returned to the previous page, but I can't figure out how to show the previously selected row as selected (although the row does have the selected class).
What I do see with my latest code is that the row (with the correct index) gets selected in the new page just before the page returns to the previous one. Of course the desired row selection in the previous page doesn't get selected.
The two lines of interest from the page event handler are:
//return to previous page
dt_table.page(pageIndexToReturn).draw('page');
//set selection on previously selected row
dt_table.row(rowIndexToReturn, pageIndexToReturn).select();
Here's the entire page event handler:
dt_table.on('page.dt', function () {
var info = dt_table.page.info();
var newPageIndex = info.page;
var state = dt_table.state();
var delta = (info.start-state.start)/state.length;
var pageIndexToReturn = Math.floor(Math.abs(newPageIndex - delta) );
var oldRow = getCurrentRow();
var rowIndexToReturn = $('#selectedRowIndex').val();
dt_table.$('tr.selected').removeClass('selected'); //need this here
determine(this).then(function(result) {
var enabled = result['enabled'];
if (enabled === 'true') {
showModal().then(function(save) {
if (save == 'true') {
//return to previous page
dt_table.page(pageIndexToReturn).draw('page');
//set selection on previously selected row
dt_table.row(rowIndexToReturn, pageIndexToReturn).select();
}
else {
clearSelectedReports();
}
})
}
else {
clearSelectedReports();
}
})
});
The question is why does the row get selected before the previous page is set? It's behaving as if the row selection statement is executing before the page selection statement?
Any thoughts on how to fix this?
When pagination applies with the LWC: Datatable pre-selected-rows, it does not work straightforward way. Because apply pagination helps to display only selected page information and hide the rest of the records actually they are not populated yet.
Because apply pagination helps to display only selected page information and hide the rest of the records actually they are not populated yet. So when you want to know about the selected rows from the data table, it gives you results in only the current page information not persist the previous or next page configured selected records.
When the user selects any page, the storage helps to populate his previous selected options. If he has done any new selection update. The system will also update the storage with the newly selected option.
I added a draw event handler, which gets called after the page handler returns. The draw handler resets my row selection.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With