Can I use Column.render multiple times in one table?

Can I use Column.render multiple times in one table?

Upsetti_SpaghettiUpsetti_Spaghetti Posts: 10Questions: 5Answers: 0

I have a table and I want to add a menu on the first column and last one, I'm using the following code and would like to achieve the result in the picture. ATM the front menu on the right (Right Caret) is done via html. I tried using two instances of the code below but it was nor working.

columnDefs: [{ targets: -1, render: function (data, type, row, meta) { return type === 'display' ? '<a href="" class="actionMenu"><img src="./assets/actionMenu.svg"></a>' : '' } }]

Table Picture

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 8,198Questions: 25Answers: 1,844
    Answer ✓

    I tried using two instances of the code below but it was nor working.

    When you say two instances do you mean something like this?

            columnDefs: [{
                targets: -1,
                render: function (data, type, row, meta) {
                    return type === 'display' ? '<a href="" class="actionMenu"><img src="./assets/actionMenu.svg"></a>' : ''
                }
            }],
    
            columnDefs: [{
                targets: 0,
                render: function (data, type, row, meta) {
                    return type === 'display' ? '<a href="" class="actionMenu"><img src="./assets/actionMenu.svg"></a>' : ''
                }
            }],
    

    If so only the 2nd one will apply as it overwrites the first. You would combine them in one columnDefs option, like this:

            columnDefs: [{
                targets: -1,
                render: function (data, type, row, meta) {
                    return type === 'display' ? '<a href="" class="actionMenu"><img src="./assets/actionMenu.svg"></a>' : ''
                }
            },
            {
                targets: 0,
                render: function (data, type, row, meta) {
                    return type === 'display' ? '<a href="" class="actionMenu"><img src="./assets/actionMenu.svg"></a>' : ''
                }
            }]
    

    Better yet you can use an array of columns with columnDefs.targets, like this:

            columnDefs: [{
                targets: [0, -1],
                render: function (data, type, row, meta) {
                    return type === 'display' ? '<a href="" class="actionMenu"><img src="./assets/actionMenu.svg"></a>' : ''
                }
            }]
    

    If this doesn't help then please post a link to your page or a test case so we can take a look at what you have.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • Upsetti_SpaghettiUpsetti_Spaghetti Posts: 10Questions: 5Answers: 0

    I see what I was doing wrong, thank you! :D and takes for the tip on the array I'll be sure to use that. Thank you.

Sign In or Register to comment.