Define a Datatable using conditional logic

Question

I want to render a datatable, but depending on the value of some variable the content will slightly change.

Ideally I would like to do something like this, to re-use some part of the code:

var DT1 = $('#myTable').DataTable( {
    ajax: {
        url: 'ajax_search',
        type: 'GET',
        data: {},
        dataSrc: "",
    },
    if (value == 'X'){
    columns: [
        {"data": "fields.X1"},
        {"data": "fields.X2"},
    ],
    columnDefs: [
        { className: 'text-center', targets: [1] },
        {
            targets: [0],
            class: 'text-center',
            orderable: true,
            render: function (data, type, row) {
                var button1 = '<a href="/x_page/" target="_blank"><u>'+data+'</u></a>';
                return button1;
            }
        },
    ],
    } else{
        columns: [
        {"data": "fields.Y1"},
        {"data": "fields.Y2"},
    ],
    columnDefs: [
        { className: 'text-center', targets: [1] },
        {
            targets: [0],
            class: 'text-center',
            orderable: true,
            render: function (data, type, row) {
                var button2 = '<a href="/y_page/" target="_blank"><u>'+data+'</u></a>';
                return button2;
            }
        },
    ],
    }
    order: [
        [0, 'asc']
    ],
    "pagingType": "numbers",
    dom: 'rtp',
});

But it does not work. Basically I just want to modify the columns and the columnDefs part based on some logic, the other parts will be the same in all the cases.

Is there a way to do that and reduce some code?

Right now the way I have this implemented is as follows (working, but probably not best practice):

if (condition1) {
  //  Entire table definition with all the code for condition1, without reusing any code
} else if (condition2) {
  //  Entire table definition with all the code for condition2, without reusing any code
} else {
  //  Entire table definition with all the code for conditionN, without reusing any code
}

But it seems extremely inefficient to me, isn't there a way to do it and reuse the common parts of the code?

Did you try the columns.data initialization option in the form of function(row, type, set, meta) to conditionally change the source of your column data? datatables.net/reference/option/columns.data — cheesyMan
– cheesyMan, Commented Mar 31, 2022 at 6:17
@cheesyMan Sounds promising but how can I hook it up with the data from the AJAX call? Could you provide an example? — Cheknov
– Cheknov, Commented Mar 31, 2022 at 6:55
I updated my answer with an updated fiddle, using columnDefs too. If this is still unclear to you, I can only suggest to dive a litte bit deeper into DataTables docs that are VERY well written, exhaustive and full of examples. Good Luck! :) — cheesyMan
– cheesyMan, Commented Apr 1, 2022 at 7:59

cheesyMan · Accepted Answer · 2022-04-01 07:56:32Z

1

When you use the function (row, type, val, meta) syntax for the columns.data initialization option, the row argument automatically receives the AJAX data of each row.

$('#example').DataTable({
    "columns": [
        { "data": function(row) {
            if(condition1) {
                return row.fieldX;
            } else if(condition2) {
                return row.fieldY;
            } else {
                // etc. 
            } 
          }
        }
     ] 
})

Anyway, you can see examples in the docs page I linked before

You can also look at this updated JSFiddle that uses both columns and columnDefs.

edited Apr 1, 2022 at 7:56

answered Mar 31, 2022 at 7:08

cheesyMan

1,5301 gold badge6 silver badges14 bronze badges

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

7 Comments

Cheknov Over a year ago

How about columnDefs? This is a partial solution isn't it?

cheesyMan Over a year ago

columnDefs and columns are to some extent interchangeable initialization options. You can use function(row, type, val, meta) in columnDefs.data initialization option as well as in columns.data initialization option. datatables.net/reference/option/columnDefs

Cheknov Over a year ago

Thanks for your answer, did some research but can't understand how to use a columnDefs or another based on some logical condition. Could you provide a very basic example so that I can understand it better and accept your answer?

cheesyMan Over a year ago

@Cheknov, the condition you check is related to the internal result of the AJAX call (i.e. if AJAX call produces X then print X, otherwise print Y)? Or it depends on some variable the AJAX call (and result) is independent from? In other words, you make always the same call and get always the same api results?

Cheknov Over a year ago

It's not related to the internal result of the AJAX call, that is why I'm a bit confused and I found it tricky. The condition1...condition2...conditionN are not related with the AJAX call at all. Thank you.

|

Collectives™ on Stack Overflow

Define a Datatable using conditional logic

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related