Deferred loading and custom rendering

Deferred loading and custom rendering

ThaddeusBThaddeusB Posts: 1Questions: 1Answers: 0

Hello Datatables Community! 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 recieve 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 https://datatables.net/examples/server_side/defer_loading.html) - that's why I use deferLoading option. The buttons in that 3rd column are pre-builded in my template. But because I use a render option, my HTML code in those column gets overrided 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).

Thanks!

Answers

  • kurthartmannkurthartmann Posts: 1Questions: 0Answers: 0
    edited August 2015

    I also have the same issue, when I user deferLoading and columnDefs to generate a URL. I noticed somebody posted a work-around to set the data property with the json data of the first page. Then, datatables will ignore the DOM data found in the table body and will use the JSON data instead. That work-around fixed my issue.

    Here's a partial setup of my datatables. Some of the arguments are resolved as expression language arguments including the JSON data string, but it should give you an idea. Using this configuration, the data in the tbody is ignored and the column rendering for column index 0 works. I don't see the undefined issue for the full.id parameter.

    Hope this helps

    $('#table_id').dataTable({
        "data": JSON.parse('${firstPageResultsJsonString}'),
        "serverSide": true,
        "ajax": {
        "url": "/scores/fetchPaginatedScores"
        },
        "deferRender": true,
        "columnDefs": [
        { "targets": 0,
          "render": function(data,type,full,meta) {
              return '<a href="${controller.viewScorePath}${currentDog.dogId}/'+full.id+'">'+data+'</a>';
          }
        },
        { "targets": 4,
           "render": function(data,type,full,meta) {
            return data == 'true' ? 'Yes' : 'No';
           }
        }
        ],
        "columns": [
        { "data": "eventDate" },
        { "data": "event.clubName" },
        { "data": "event.venueName" },
        { "data": "qualifiedDisciplines" },
        { "data": "mediaFound" }
        ],
        "deferLoading": ${recordsTotal},
    
This discussion has been closed.