Realtime Editing without Web Socket | Socket.io | Real Time Editor | Auto Refresh inline real time

aungkohein

Hi guy!

With the help of Allan, I managed to find a workaround for real time effect on Datatables Editor.

It is not easy to integrate web socket with inline editing. Here is the concept for workaround:

1. Use ajax.reload() - to refresh the table (without refreshing the page)
2. Use setInterval() - to set frequency for auto refresh
3. Use clearInterval() - to stop auto refresh only when editing in the cell

That will give you a real time experience to your clients!

Steps:

File: js/table.youTableName.js
1.

 //Auto Refresh (ajax.reload)
    var refreshTable = setInterval( function () {
        table.ajax.reload( null, false ); // user paging is not reset on reload
        table.keys.enable();  
    }, 3000 );  //3000 means 3 seconds; you cannot put 0 -> error

2.

    //   Activate an inline edit on click of a table cell
     $('#youTableName').on( 'keyup', 'tbody td:not(:first-child)', function (e) {
         clearInterval( refreshTable );
         table.keys.disable();
     });
        
    // Inline editing on tab focus
    $('#youTableName').on( 'keydown', 'tbody td:not(:first-child)', function (e) {
          
      clearInterval( refreshTable );
      table.keys.disable();

  });

  //   Activate an inline edit on click of a table cell
     $('#youTableName').on( 'click', 'tbody td:not(:first-child)', function (e) {
         editor.inline( this, {
             submitOnBlur: true
         });
         clearInterval( refreshTable );
         table.keys.enable();
     });

//Additional codes if you want to submit using TAB in inline editing
    // when tab key is pressed  
    $('#youTableName').on( 'keydown', 'tbody', function (e) {
        if(e.which == 9) {                                      
            e.preventDefault();
            var $input = $('form input');
            $input.eq( $input.index( this ) + 1 ).focus();
            table.keys.enable();
        }
   } );

allan

Thanks for posting this .

Allan

aungkohein

Missed out this:

Add this to the above codes:

// To restart auto refresh after cell edited
editor.on( 'close', function () {
setInterval( function () {
table.ajax.reload( null, false ); // user paging is not reset on reload
table.keys.enable();
}, 3000 );
} );

aungkohein

[UPDATED]

Hi guys!

The above codes works pretty fine but after few round of testings, it has a loophole which does not make editing smooth. Hence, please use the code below instead!

Steps:

File: js/table.youTableName.js

table.keys.enable();

var timer;

function refreshTable(){


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

    };

//   Activate an inline edit on click of a table cell
 $('#YourTableName').on( 'keyup', 'tbody td:not(:first-child)', function (e) {
     clearInterval( timer );
     table.keys.disable();
 });

// Inline editing on tab focus
$('#YourTableName').on( 'keydown', 'tbody td:not(:first-child)', function (e) {
    table.keys.disable();
    clearInterval( timer );
});

// when tab key is pressed  
$('#YourTableName').on( 'keydown', 'tbody', function (e) {
    if(e.which == 9) {                                      
        e.preventDefault();
        var $input = $('form input');
        $input.eq( $input.index( this ) + 1 ).focus();
        table.keys.enable();
    }

} );

// when tab key is pressed
editor.on( 'close', function () {
table.keys.enable();
refreshTable();
} );

// Activate an inline edit on click of a table cell
 $('#YourTableName').on( 'click', 'tbody td.inline', function (e) {
         editor.inline( this, {            
     });         
    table.keys.enable();
    clearInterval( timer );
 });

// Inline editing on tab focus
//table.on( 'key-focus', function ( e, datatable, cell ) {
// editor.inline( cell.index() );
//} );

refreshTable();

-------------- end --------------------