Add action column for ajax source

andresraieste

Hello,

I use datatables with Ajax source. I initialize datatables like this (with some C# SS code):

[code]
a_table = $('#documentgrid').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "<%= Html.BuildUrlFromExpressionForAreas(c => c.GetProcedureDocuments(Model.Proc.Id)) %>",

"bPaginate": false,
"bLengthChange": false,
"sScrollY": "150px",
"bFilter": false,
"bSort": true,
"bInfo": false,
"bAutoWidth": true,
//"sDom": 'T<"clear">lfrtip',
//"sPaginationType": "full_numbers",
"aoColumns": [
{ "bSearchable": false, "bSortable": false, "bVisible": false },
{ "bSearchable": true, "bSortable": true, "bVisible": true },
{ "bSearchable": true, "bSortable": true, "bVisible": true },
{ "bSearchable": false, "bSortable": false, "bVisible": false },
{ "bSearchable": true, "bSortable": true, "bVisible": true },
{ "bSearchable": false, "bSortable": false, "bVisible": false },
{ "bSearchable": false, "bSortable": false, "bVisible": false }
],
"aaSorting": [[2, 'asc']]
});
[/code]

And you can see, I initialize 7 columns that my Ajax source returns, although I don't show all of them. I also have an html table defined with 7 columns (td's and th's) defined and everything works fine.

However now I wish to add an "action" column that has and button or link inside it, that when clicked, calls some javascript code. How could I do that ?

I checked out some expamples and tried something like this:
[code]
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#documentgrid thead tr').each(function () {
this.insertBefore(nCloneTh, this.childNodes[0]);
});

$('#documentgrid tbody tr').each(function () {
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
});

/* Add a click handler to the rows - this could be used as a callback */

$("#documentgrid tbody").click(function (event) {
$(a_table.fnSettings().aoData).each(function () {
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
[/code]

I also added a new column into the HTML table and aoColumns but got that famous "does not match the know number of columns" error.

Please advise.

Thanks!

UPEngineer

I had the exact same scenario as you did if I read it right.

In your example, the way I did it was to add the "8th" column like normal and then return the button or image ( I did both for different tables) in your json return.

So basically the server return would have your 7 data columns and the button or image column for total of 8. I also added a class or id on these elements on server side so I could manipulate it with jquery with a live event.

So try adding your 8th column in the table itself and then add the 8th column of the button or image in your server script and see if that works.

Here is my code in the html:

[code]



Code No
Claim Position
Select<!-- your image column -->




Loading data from server<!-- this will be replaced by your data and button on the server return -->



[/code]

Here is the line in my php server code that adds the details image to the server return. In this case, I returned a radio button that had the id set to the claim code.

[code]
$sOutput .= '""';
[/code]

Hope it helps.

Scott

andrew2311

Does anyone have a neater solution to this? I'd rather not return HTML in my JSON data from the server

Rj01

I am having the same troubles and no solution?