Can't select row to add class after clearing table and adding new data in

shayhurst

Hi.
Firstly thanks for this tool, its definitely the best of its kind! I'm having some trouble however and need some help. I feel like I'm close to the solution but just can't get there.

The table I use is for displaying search results. There are 3 tables in the page and I'm trying to keep my code as DRY as possible, so im often searching for the nearest table to a button click, say, and getting the DataTable object from the returned Id rather than directly referencing the javascript object.

I have a requirement whereby when a user selects a result in the table and then does another search, the table is overwritten with the new search results BUT the selected row needs to remain, and be shown as still selected.

So far I've managed to get the selected row to jump to the top using orderFixed on a boolean column so that works great. I also style the selected row using $j(table.row(0).node()).addClass('selected');

I can also clear the table when another search is done but keep a copy of an selected row first, like so:

function displaySearchResult(tblId, event, result){
    var tableObj = $j('#' + tblId).DataTable();
    //backup selected row if there is one so we can put it back later
    var selectedRowData = [];
    var selectedRow = tableObj.row('.selected').data();
    if(selectedRow){
        selectedRowData.push(selectedRow);
    }
...
}

I get the table using the given Id, find a selected row and make a copy.

I can then push the selected row back into the cleared table using row.add and then add the new search results. So far so good. BUT then I want to highlight the selected row again. This is where my problem lies. If I try to reference tableObj.row(0).node() it now doesn't work. It works elsewhere in my code, but not here after clearing the table and adding new rows. I just need to be able to get the node of the selected row so I can add the style back on.

If I reference the row using the node function and then try to add the style I get the error row.hasClass is not a function.

Here's the code for the functions that do the work, any help would be appreciated!

        /*
        When a row is clicked on, highlight it by adding a class
        unless the user has clicked on the already-selected row,
        in which case remove the class to clear the selection
        */
        function highlightRow(tblId, row){
            var tablejQueryObj = $j('#' + tblId).dataTable();
            var tableObj = $j('#' + tblId).DataTable();
            
            //Find if a row has 1 in the 'selected' column
            var rowId = tablejQueryObj.fnFindCellRowIndexes('1', 10);
            
            //and set the value back to 0
            if(rowId.length){
                tableObj
                   .cell(rowId, 10)
                   .data('0')
                   .draw();
            }
            
            //then remove the selected style class
            if(row.hasClass('selected')){
                //user has clicked a selected row, this deselects the row
                row.removeClass('selected');
                return false;
            }
            
            //If user has clicked an unselected row, first clear
            //any other selected row and then select the new one
            
            //clear any other row in the table which may be selected
            tableObj.$('tr.selected').removeClass('selected');
            
            //mark this row as selected
            row.addClass('selected');
            tableObj.cell('.selected', 10).data('1');
            return true;
        };
        
        /*
        Pass in the table to update, and the event and result of the ajax call
        and the table will be refreshed with the new results, or an error will display
        */
        function displaySearchResult(tblId, event, result){
            var tableObj = $j('#' + tblId).DataTable();
            //backup selected row if there is one so we can put it back later
            var selectedRowData = [];
            var selectedRow = tableObj.row('.selected').data();
            if(selectedRow){
                selectedRowData.push(selectedRow);
            }
            //clear the table
            tableObj.clear().draw();
            if(event.status){
                if(result.length) {
                    //add selected row back in if there was one
                    if(selectedRowData.length){
                        tableObj.row.add(selectedRow).draw();
                        /*
                        Why doesn't this get the row??
                        */
                        highlightRow(tblId, tableObj.row(0).node());
                    }
                    //add new search results
                    tableObj.rows.add(result).draw();
                }else{
                    showMsg('No results');
                }
            }else{
                showMsg(event.message);
            }
            closePopup("loader");
        }

Thanks
Steven

shayhurst

Just to add, the use case for this has been removed so its no longer an issue for me, however I'm keeping it on here because I'd like to learn why it didn't work as I would expect, maybe it'll help me avoid future issues

shayhurst

I've figured it out, node() doesn't get the same reference as $j(this) which returns an object so I'm just going to grab the top row with jquery and pass that instead of using node()