Problem by adding an action column

klex

Hi @ all!

I am trying to add an action-colum (single action for every record in DT).

I'm recieving the data by Ajax (using sAjaxSource) which works fine,
afterwards I am trying to call my "actionbarBuilder" function by fnInitComplete and I think here the problem starts.

The "td" elements for the action bar are marked with an class (class="actionbar").
Now I am trying to get them with $('.actionbar') but they are not found.

I tested around for a while (~2 days) and it seems the "td"-elements are not ready at this point.


The source:
[code]
$(document).ready(function() {
oTable = $('#test').dataTable(
{
"bJQueryUI": true,
"bSort": true,
"bInfo": true,
"bPaginate": true,
"sPaginationType": 'full_numbers',
"bProcessing": true,
"sAjaxSource": 'someSourceUrl',
"fnInitComplete": 'actionBarForTable({"identifyClass":"actionbar","some":"values"})',
"aoColumns":[{"sTitle":"ActionBar","sClass":"actionbar"},null,null]
}
);
} );

function actionBarForTable (options) {
$("." + options.identifyClass).each(
function () {
console.log($(this).html()); //for testing
}
)
}
[/code]

I know it could be done by "fnRowCallback" but the problem is by using more than one DT, because I would have to create an own function for every table, but I want to keep the JS as small as possible. That's the reason I am putting the '{"identifyClass":"myActionbar","some":"values"}' in the functioncall.

Does someone have any idea? Did I forget a semikolon? ;)

It would be great to fix that, because than I can finish the Zend Framework integration for DT :)

Thank you very much!

klex

Ok I solved the problem, but I have had to touch the DT Core.

At the var declaration part I added:
[code]
this.fnTableReady = null;
this.oTableReadyOptions = null;
[/code]

In the constructor I added:
[code]
_fnMap( oSettings, oInit, "fnTableReady");
_fnMap( oSettings, oInit, "oTableReadyOptions");
[/code]

At the end of the "_fnDraw" function I added:
[code]
if ( typeof oSettings.fnTableReady == 'function' )
{
if( typeof oSettings.oTableReadyOptions == 'object') {
oSettings.fnTableReady.call(oSettings.oInstance,oSettings.oTableReadyOptions);
} else {
oSettings.fnTableReady.call(oSettings.oInstance);
}
}
[/code]

Now I am able to manipulate the data after drawing by using Ajax.
[code]
$(document).ready(function() {
oTable = $('#test').dataTable(
{
"bJQueryUI": true,
"sAjaxSource": 'someAjaxUrl',
fnTableReady : actionBarForTable, //Call the function
oTableReadyOptions: {"identifyClass":"idfClass","opt2":"val2"}, //if you want, pass some data to use in the function
"aoColumns":[{"sTitle":"ActionBar","sClass":"myActionbarClass","bSortable":false,"bSearchable":false},{"key":"value"},null]
}
);
} );

//In this function I am building up my Action bar.
//This field first contained the ID of data-record
function actionBarForTable (options) {
var tableId = $(this).attr("id");
var oTbody = $("#" + $(this).attr("id") + " tbody");
if($(oTbody).children().size() > 1){ //more than 1 tr
$("." + options.identifyClass).each(
function () {
if($(this).attr("id") == "") {
$(this).attr("id", tableId + "_" + $(this).text());
}
var id = $(this).attr("id").replace(tableId+"_", "");
$(this).html("show|edit|delete| ID:" + id);
}
);
}
}
[/code]

This is only an example how I use it, but in that way you can do a lot of other things ;)

If someone is interested or has an idea please comment ;)

When I finished the ZF integration I will let you know!

Best regards,
Alex