Keep selected cell after refresh | Keep selected cell after ajax reload

Keep selected cell after refresh | Keep selected cell after ajax reload

aungkoheinaungkohein Posts: 38Questions: 5Answers: 0

Hi Allan & All,

My table is on automatic ajax reload every 3 seconds. Selected cell border disappeared though broswer did save it's location. When I use my arrow keys, it got activated to navigation again. But it will disappear again every 3 seconds.

I turn off the state saving for a reason. I would like to keep (show) the selected cell (only the cell selected; not filter or page) showing after ajax reload.

What is the syntax I could add to the refreshTable() function?

File: js/table.YourTableName.js

var table = $('#cargoes_lr2').DataTable( {

table.keys.enable();

var timer;

function refreshTable(){
    timer = setInterval( function(){
        table.ajax.reload( null, false ); // user paging is not reset on reload
    }, 3000 );

};

-- end --

Thank you!

Answers

  • colincolin Posts: 12,890Questions: 0Answers: 2,198

    Hi @aungkohein ,

    I made this from this example - the example was for rows so I changed it to use cells. Hope that does the trick for you,

    Cheers,

    Colin

  • aungkoheinaungkohein Posts: 38Questions: 5Answers: 0
    edited November 2018

    Hi @colin ,

    Thanks for the help!

    It does not work. When I add this: "dataSrc": "" the result does not show. If I remove "dataSrc": "" , the blinking selected cell continues every 3 seconds.

    It also caused another problem which the row cannot be selected now. I have a checkbox (on my 1st column) for each row to be selected to delete.

  • colincolin Posts: 12,890Questions: 0Answers: 2,198

    Hi @aungkohein ,

    We're happy to take a look, but it would really help if you could link to a test case. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • aungkoheinaungkohein Posts: 38Questions: 5Answers: 0

    Hi @colin,

    Thanks for the help! I managed to get this from @allan.

    function refreshTable(){

        var selected = table.cell({focused: true}).index();
         timer = setInterval( function(){
             table.ajax.reload( function () {
    
              table.cell( selected ).focus();
    
            }, false ); // user paging is not reset on reload
         }, 3000 ); 
    

    };

    Thanks to both of you!

    Cheers.

  • aungkoheinaungkohein Posts: 38Questions: 5Answers: 0
    edited November 2018

    //the above code has a bug. Have been rectified below.

    var timer;

    function refreshTable(){
    
         timer = setInterval( function(){
    
             var selected = table.cell({focused: true}).index();
    
             table.ajax.reload( function () {
    
                table.cell( selected ).focus();
    
            }, false ); // user paging is not reset on reload
         }, 3000 ); 
    };
    
This discussion has been closed.