Search code examples
jquerytabulator

How to highlight a single cell in Tabulator when data changes


I'm trying to use the jQuery .effect() function to highlight changes in my Tabulator data as it is refreshed from the server.

I am still using Tabulator 3.5 so thought jQuery .effect() would be the simplest approach. It is not mandatory to use, as long as the desired result is achieved.

I've tried to set up a simple counter in the table where the value is highlighted as it changes (no ajax yet), but can only get the whole row, column, or row and column to be highlighted, and not the cell specifically.

var i = 1;
var timer = setInterval(function(){
    if(i<=5){
        var id = 12345;
        var row = $("#live-table").tabulator("getRow", id);

        // Manually updated for now - from ajax later
        $("#live-table").tabulator("updateData", [{playerId:id, blah:i}]);

        // Successfully highlights the col on value change
        $("#live-table .tabulator-cell[tabulator-field=blah]").effect( "highlight",{color: '#329cff'},3000);
        // Successfully highlights the row on value change
        $("#live-table .tabulator-row:nth-child(1)").effect( "highlight",{color: '#329cff'},3000);

        i++;
    }else{
        clearInterval(timer);
        console.log("cleared");
    }
}, 3000); 

I've tried combining the two lines into one .effect() with varying syntax to highlight only the cell, but this has not been successful.

I've searched the docs for a callback that I could use (like dataEdited etc), but haven't been able to find one as yet. If there was something available that detected the change in CELL value it would be much simpler going forward, as there will be some processing server side to actually find the changed data using my current approach - specifically a row number and col name...

UPDATE: Fiddle of what I was trying to acheive.


Solution

  • I've managed to solve the problem using the following code. The counter in the timer will be replaced by a longer interval and a query of the database when fully implemented, and is obviously not necessary to achieve the highlighting of changed data. NOTE: Tabulator version 3.5...

    var i = 1;
    var timer = setInterval(function(){
        if(i<=5){
            var id = 12345;
            var row = $("#live-table").tabulator("getRow", id);
            var cell = row.getCell("blah");
            // Manually updated for now - from ajax DB query later
            $("#live-table").tabulator("updateData", [{playerId:id, blah:i}]);
            cell.getElement().effect( "highlight",{color: '#329cff'},3000);
            i++;
        }else{
            clearInterval(timer);
        }
    }, 3000); 
    
    

    UPDATE: Fiddle of what I was trying to acheive.