Deferred loading and custom rendering

Question

I have a datatable which uses a server-side processing. Something like this:

var table = $('#example').dataTable( {
    "processing": true,
    "serverSide": true,
    "deferLoading": 50,
    "columnDefs": [
        {
            "name": "a.edit",
            "targets": 3,
            "render": function ( data, type, full, meta ) {
                return '<a class="btn btn-info" data-sid="'+data.id+'" href="'+data.url+'">Edit</a>';
            }
        }
    ]
});

As you can see, my 3rd column is a link/button rather than raw text. I receive ID and URL variables from the data returned form the processing script.

My problem is that I want to draw initial page of the table built-in to the template, rather than load it with AJAX request (just like this) - that's why I use deferLoading option. The buttons in that 3rd column are pre-built in my template. But because I use a render option, my HTML code in those column gets overridden with the one that I wrote in a render option. And, since I don't have data-variables returned from AJAX request in my initial template, they're just getting an undefined value.

What I want is to have the columns in my initial page "untouched" by render option - and only apply that render parameter for the data from AJAX requests (2-3-N pages).

Answer 1

Try this code instead to use render only when data.id is not undefined, i.e. after successful AJAX request.

var table = $('#example').dataTable( {
    "processing": true,
    "serverSide": true,
    "deferLoading": 50,
    "columnDefs": [
        {
            "name": "a.edit",
            "targets": 3,
            "render": function ( data, type, full, meta ){
                if(typeof data.id !== 'undefined'){
                    data = '<a class="btn btn-info" data-sid="'+data.id+'" href="'+data.url+'">Edit</a>';
                }

                return data;
            }
        }
    ]
});