How to highlight that a new row has been added?

How to highlight that a new row has been added?

timcadieuxtimcadieux Posts: 76Questions: 22Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • bindridbindrid Posts: 730Questions: 0Answers: 119
        $("#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

  • timcadieuxtimcadieux Posts: 76Questions: 22Answers: 0

    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);
    }
    
  • timcadieuxtimcadieux Posts: 76Questions: 22Answers: 0

    I have added

    dataTables.select.min.js to my page

  • bindridbindrid Posts: 730Questions: 0Answers: 119
    Answer ✓

    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.

  • timcadieuxtimcadieux Posts: 76Questions: 22Answers: 0

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

This discussion has been closed.