populate html5 data attributes within a cell from ajax call

demianr

Hello,

I am populating a table with data from an ajax call. The data is passed back from server, and then updated using the dataSrc callback. As in an example of transforming the data via the dataSrc function, the added link (col1) works like a charm. However, I don't see how to add html5 data attributes to the cell in col 2. I would like the cells in col2 to toggle a modal and pass some data to the modal. What is the correct way of populating the cells with html5 data attributes? I would like to do so for a large number of rows using server-side processing.

var stable  = $('#someID').DataTable( {
                        ajax: {
                            "url"     : '/someurl',
                            "dataSrc" : function(json) {
                                var data = json.data;
                                for ( var i=0, ien = data.length ; i<ien ; i++ ) {
                                    data[i].col1 = '<a href="/somepath" download>' + data[i].col1 + '</a>';    // this works great!
                                    data[i].col2 = '<td data-someid="'+ data[i].someid +'">'+ data[i].col2 + '</td>' ;  // this doesn't work
                                }
                                return data;
                            }
                        },
                        "processing": true,
                        "serverSide": true,   
                        "deferRender": true,
                        columns : [
                                    { data: "col1" }, 
                                    { data: "col2" },
                        ],
        });

demianr

Nevermind! I was able to get the attributes added using the createdRow callback.

var stable  = $('#someID').DataTable( {
                        ajax: {
                            "url"     : '/someurl',
                            "dataSrc" : function(json) {
                                var data = json.data;
                                for ( var i=0, ien = data.length ; i<ien ; i++ ) {
                                    data[i].col1 = '<a href="/somepath" download>' + data[i].col1 + '</a>';   
                                }
                                return data;
                            }
                        },
                         createdRow: function( row, data, dataIndex ) {
                                $( row ).find('td:eq(1)').attr('data-someid', data.someid);
                                $( row ).find('td:eq(1)').attr('data-toggle', "modal");
                                $( row ).find('td:eq(1)').attr('data-target', "#sModal");
                         },
                        "processing": true,
                        "serverSide": true,  
                        "deferRender": true,
                        columns : [
                                    { data: "col1" },
                                    { data: "col2" },
                        ],
        });