CODEWITHSUNDEEP
javascriptjquerydatatables
Phil O
Phil O

Reputation: 1668

datatables and pagination and row selection issue

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?

Upvotes: 6

Views: 906

Answers (1)

Phil O
Phil O

Reputation: 1668

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

Upvotes: 3

Related Questions