datatable not adding button to column

datatable not adding button to column

donaghdonagh Posts: 2Questions: 1Answers: 0

Hi
Im using the awesome datatables and having a problem adding a button to all cells in the second column.
I am following this example https://datatables.net/examples/ajax/null_data_source.html

My datatables are loaded from server side processing without a problem.
The only column headers I know for sure each time a datatable is loaded is the ID and Image_ID. (First and second column).
As you can see I am getting my column count and adding the headers before I call the server url.
Below is my code. The table loads perfectly with an empty column under the column Image ID. But just no buttons.

And below the code is an example of json that is coming in.

Very much appreciate any help thank you.

var start = '<thead><tr>';
var mid = '';
var end = '</tr></thead>';

var my_columns=0;

my_columns= $(this).closest('tr').find('td:eq(5)').text();
console.log('my_columns :' + my_columns )

for (i = 0; i <= my_columns; i++) {
console.log('columns : '+i);

    };

mid += '<th>' + '' + '</th>';

var header = start + mid + end;

$spr_cnt_tbl.html(header);

$("#spr_she").find("#spr_tit").text("You are Viewing Spreadsheet with id: " + _id.id); //maybe title?
$("#spr_she").modal({keyboard: true});

var table = $spr_cnt_tbl.DataTable( {
"serverSide": true,
"ajax": {
"url": url_string,
"cache": true,
"columnDefs": [ {
"targets": 1,
"data": null,
"defaultContent": "<button>Select Image ID</button>"
} ]
},
});
$spr_cnt_tbl.on( 'click', 'button', function () {
var data = table.row( $(this).parents('tr') ).data();
alert( 'YO YO YO');
});
});

Json...

{"draw": 0,
"recordsTotal": 9,
"recordsFiltered": 9,
"data":[["1", "Image_ID", "col1", "col2", "col3", "col1", "col2", "empty col", "col1", "col2", "col3", "col1", "col2", "empty col"], ["2", null, "testing data 1", "testing data 2lk\nIdrjy9dyj", "testing data 3", "testing data 1", "testing data 2lk\nIdrjy9dyj", null, "testing data 1", "testing data 2lk\nIdrjy9dyj", "testing data 3", "testing data 1", "testing data 2lk\nIdrjy9dyj", null], ["3", null, "edsdsdsd", "testing data 3", "testing data 4", "edsdsdsd", "testing data 3", null, "edsdsdsd", "testing data 3", "testing data 4", "edsdsdsd", "testing data 3", null], ["4", null, "testing data 1", "anothertestk\nBroken here", "testing data 3", "testing data 1", "anothertestk\nBroken here", null, "testing data 1", "anothertestk\nBroken here", "testing data 3", "testing data 1", "anothertestk\nBroken here", null], ["5", null, "testing data 1", "testing data 2lk\nIdrjy9dyj", "testing data 3", "testing data 1", "testing data 2lk\nIdrjy9dyj", null, "testing data 1", "testing data 2lk\nIdrjy9dyj", "testing data 3", "testing data 1", "testing data 2lk\nIdrjy9dyj", null], ["6", null, "edsdsdsd", "testing data 3", "testing data 4", "edsdsdsd", "testing data 3", null, "edsdsdsd", "testing data 3", "testing data 4", "edsdsdsd", "testing data 3", null], ["7", null, "testing data 1", "anothertestk\nBroken here", "testing data 3", "testing data 1", "anothertestk\nBroken here", null, "testing data 1", "anothertestk\nBroken here", "testing data 3", "testing data 1", "anothertestk\nBroken here", null], ["8", null, "testing data 1", "testing data 2lk\nIdrjy9dyj", "testing data 3", "testing data 1", "testing data 2lk\nIdrjy9dyj", null, "testing data 1", "testing data 2lk\nIdrjy9dyj", "testing data 3", "testing data 1", "testing data 2lk\nIdrjy9dyj", null], ["9", null, "edsdsdsd", "testing data 3", "testing data 4", "edsdsdsd", "testing data 3", null, "edsdsdsd", "testing data 3", "testing data 4", "edsdsdsd", "testing data 3", null]]}

Answers

  • donaghdonagh Posts: 2Questions: 1Answers: 0

    How does one get help around here?

This discussion has been closed.