How to highlight that a new row has been added?

timcadieux

I have a Table that has a rows.add() function that runs on a timer. I am able to successfully add the new data but I'd like to be able to highlight it, just for 1-2 seconds that something has changed, ie change the background css for the row and then reset it.

Ideas?

bindrid

    $("#btnGo").click(function(){
        
        var addrow =         {
            "name": "Aaron Jack",
            "position": "Database Architect",
            "salary": "$120,800",
            "start_date": "2017\/06\/06",
            "office": "Seattle",
            "extn": "1432"
        };
        var row =  $("#example").DataTable().row.add(addrow).select().draw().node();
        setTimeout(function(){$("#example").DataTable().row(row).deselect();}, 5000);
    })

http://jsbin.com/yifofu/edit?html,js,output

timcadieux

Thank you. I tried you jsBin and it worked but if I use the same on my version I get the following error.

I'm using version 1.10.12

** - JavaScript runtime error: Object doesn't support property or method 'select'

function CallNewNewsAlerts() {

    var d = new Date();
    var n = d.toISOString();

    var addrow = {
                'subject': '<a href=\"http://www.google.ca\" target=\"_blank\" alt=\" This is a test \"><i class=\"fa fa-external-link\"></i></a>',
                'title': 'System Architect',
                'timestamp': n,
                'source': 'Health Canada'
    };
    var row = $("#datatable-world").DataTable().row.add(addrow).select().draw().node();
    setTimeout(function () { $("#datatable-world").DataTable().row(row).deselect(); }, 5000);
}

timcadieux

I have added

dataTables.select.min.js to my page

bindrid

This logic depends on having https://datatables.net/extensions/select/ extension.

I updated the link http://jsbin.com/yifofu/29/edit to have two buttons now. The first button uses the logic shown above.

The second button does it just by adding then removing a class name as defined in the css panel. Normally, I try to avoid using the !important attribute, but in this case it is appropriate since the class will only be used for a few seconds.

A flaw in both solutions is that if you have paging, the row you add may get sorted out of view so some additional logic might be required to make the page that the row got sorted to the active page.

timcadieux

The Class version worked perfectly, thank you for helping me with this!