Add class to row based on if condition (if == null)

Add class to row based on if condition (if == null)

peter-werkpeter-werk Posts: 8Questions: 4Answers: 0

Hello I have column with social icons and if data == null for the item I would like to add class disbaled to this item. The problem is that I have 3 icons and data can be avalible for on two or all three items

data: null,
searchable: false,
render: function ( data, type, row ) {return '<div class="d-flex justify-content-between"><a href="'+row.Team_tw+'" class="fa fa-brands fa-twitter'+{if (row.Team_tw == null) (return "disabled")}+'"></a><a href="'+row.Team_yt+'" class="fa fa-brands fa-youtube"></a> <a href="'+row.Team_telegram+'" class="fa fa-brands fa-telegram"></a></div>'}},

This question has an accepted answers - jump to answer

Answers

  • rf1234rf1234 Posts: 2,368Questions: 76Answers: 341
    edited September 22 Answer ✓

    You can use rowCallback. This has an example, too:
    https://datatables.net/reference/option/rowCallback

    And an example from my own coding:

    rowCallback: function (row, data) {
        if ( data.cashflow.manual > 0 || data.cashflow.additional_repayment > 0 ) {
            $(row).addClass('fontThick');
        }
        //if it is not the summation row the row should be selectable
        if ( data.cashflow.position !== 'L' ) {
            $(row).addClass('selectRow');
        }
    }
    ....
    select: {
        style: 'single',
        selector: 'tr.selectRow td:not(:first-child)'
    },
    
  • peter-werkpeter-werk Posts: 8Questions: 4Answers: 0

    Thank you your answer give me some hints here is the final solution for community

    rowCallback: function (row, data, index) {
                if ( data.Team_telegram == null ) {
                    $('#icon_tw', row).addClass('disabled');
                }
                if ( data.Team_telegram == null ) {
                    $('#icon_yt', row).addClass('disabled');
                }
                if ( data.Team_telegram == null ) {
                    $('#icon_tg', row).addClass('disabled');
                }
            },
    

    And setup of the column is like this

    {
    data: null,
    searchable: false,
    render: function ( data, type, row ) {return '<div class="d-flex justify-content-between"><a href="'+row.Team_tw+'" id="icon_tw" class="fa fa-brands fa-twitter"></a><a href="'+row.Team_yt+'" id="icon_yt" class="fa fa-brands fa-youtube"></a> <a href="'+row.Team_telegram+'" id="icon_tg" class="fa fa-brands fa-telegram"></a></div>'}},
    
Sign In or Register to comment.