Modifying rendered columns based on if statements

Neighlyd

Hello,

I'm not sure if I got the write title here, but what I am trying to do is figure out how to dynamically adjust the data that is appended to my datatable's columns based upon dynamic variables.

Some (non-working) code may be more illustrative:

let relationship_table = $('#relationship_table').DataTable({

            serverSide: true,
            columns: [
                {data: 'person_one',
                    defaultContent: '',
                    name: 'person_one.first_name, person_one.relation_name, person_one.last_name, person_two.first_name, person_two.relation_name, person_two.last_name',
                    orderable: false,
                    render: {
                        display: function (data, type, row) {
                            if (row.person_one.id == person) {
                                var url = Urls['person:detail'](row.person_two.id);
                                return "<a href='" + url + "'>" + row.person_two.full_name + "</a>";
                            } else {
                                var url = Urls['person:detail'](row.person_one.id);
                                return "<a href='" + url + "'>" + row.person_one.full_name + "</a>";
                            }
                        },
                    },
                },
                {data: 'relationship.relation',
                    name: 'relationship.relation',
                },
                {data: 'confidence',
                    defaultContent: false,
                    searchable: false,
                },
                <I WANT MY IF STATEMENT HERE TO CHECK TO SEE IF A VARIABLE IS TRUE OR NOT; IF TRUE, ADD THE FOLLOWING COLUMN; IF FALSE, DO NOT>
                {data: null,
                    render:{
                        display: function(data, type, row){
                            var url = Urls['relationship:edit'](row.id);
                            return "<a href='#' class='edit_relationship' data-url='" + url + "'>edit</a>";
                        }
                    }
                }
                <IF STATEMENT WOULD END HERE>
            ]
        });

Clearly, the if statement couldn't go internally to the columns array, but is there any way to, perhaps, pre-render the datatable, do the check, and then append the column to the list of columns?

I found the push() function in the API, but I can't quite figure out how to make that work the way I would like.

Does anyone know if this is even possible? I currently have two versions of this datatable (one with the extra column, and one without) and do my logic check before rendering the datatable, but that seems like a lot of redundant code (especially once I get into more than one if/then statements in each table).

Thanks in advance!

colin

Hi @Neighlyd ,

Yep, that push() wouldn't work here. Once you've initialised the table, with a width of columns, that width can't be changed.

But what you could do, is always initialise with the maximum number of columns and do the rendering the same as you always would, Then, in the initComplete do your test to see if you want less columns, and use column().visible() to hide them if you don't.

Would that work?

Cheers,

Colin

Neighlyd

Hi Colin,

Thanks for the feedback. I don't think that could work, since I am trying to use server-side testing in my django templates to configure what columns are sent to the client. Your solution sounds like all the columns would be sent, but some of them would be hidden client-side. The problem is that this would expose the edit/etc. information to the client-side, albeit in an obfuscated case, leading to a security flaw (of course, I have redundancy checks for the actual editing page).

I'll play around with it though and see if I can use that to work out something that is relatively secure.

Thanks!