datatables and pagination and row selection issue

Question

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?

Just to know what needs to be handled in a possible solution: do you use any kind of sorting or is it a static table? — SaschaM78
– SaschaM78, Commented May 20, 2020 at 16:17
Good question, sorting is allowed, but the row index on the page is safely tucked away. I think I need to do my row selection after the page event handler returns and not from within it. That's starting to seem obvious to me. — Phil O
– Phil O, Commented May 20, 2020 at 16:21
I also thought that the draw() method might by asynchronously but it's not, just tested it. I created a Codepen to handle switching between two selected rows and it works in my setup but my used table is not sortable so it's not comparable. — SaschaM78
– SaschaM78, Commented May 20, 2020 at 16:29

Phil O · Accepted Answer · 2020-05-20 16:30:16Z

3

I added a draw event handler, which gets called after the page handler returns. The draw handler resets my row selection.

answered May 20, 2020 at 16:30

Phil O

1,6784 gold badges32 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

datatables and pagination and row selection issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related