jQuery data table issue with render call back function

Question

I am adding a div to my jQuery dataTable using render call back function:

columns: [
            {
                data: 'FirstStep',
                render: function (data, type, row) {
                    if (data === 4) {
                        return '<div class="red-circle"></div>';
                    }
                    else if (data === 3) {
                        return '<div class="yellow-circle"></div>';
                    }
                    else if (data === 2) {
                        return '<div class="blue-circle"></div>';
                    }
                    else if (data <= 1) {
                        return '<div class="green-circle"></div>';
                    }
                }
            },
            --Other columns 
            }
        ]

This works fine but If I extract render call back to a function ( need to reuse several times )and trying code as below , it does not work.

function renderCellItems(data, type, row) {
        if (data === 4) {
            return '<div class="red-circle"></div>';
        }
        else if (data === 3) {
            return '<div class="yellow-circle"></div>';
        }
        else if (data === 2) {
            return '<div class="blue-circle"></div>';
        }
        else if (data <= 1) {
            return '<div class="green-circle"></div>';
        }
    }

...............

{
    data: 'FirstStep',
    render: renderCellItems(data, type, row)
}

It takes 3 arguments and we are passing 3 arguments to new function — Simsons
– Simsons, Commented Jun 1, 2018 at 8:56

Rory McCrossan · Accepted Answer · 2018-06-01 08:56:15Z

1

The issue is because you are currently supplying the response from that function as the render property, ie. the HTML string, yet the property expects a function.

You instead need to provide the reference to that function. To do that, remove the trailing parentheses and arguments:

{
  data: 'FirstStep',
  render: renderCellItems
}

Also note that you can improve the logic by using an array to store the return values:

function renderCellItems(data, type, row) {
  var classes = ['green-circle', 'blue-circle', 'yellow-circle', 'red-circle'];
  return '<div class="' + classes[Math.max(data, 1) - 1] + '"></div>';
}

console.log(0, renderCellItems(0));
console.log(1, renderCellItems(1));
console.log(2, renderCellItems(2));
console.log(3, renderCellItems(3));
console.log(4, renderCellItems(4));

answered Jun 1, 2018 at 8:56

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery data table issue with render call back function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related