Custom Columns with Server Side processing

skione

It seems that the examples and documentation when using server side processing require you to specify the table header prior to loading the data.

Can I dynamically load the table columns like I load the data?

ChrisGedrim

Skione,

As Allan says in this thread: http://datatables.net/forums/comments.php?DiscussionID=3519 - you would have to make a separate ajax call to get the aoColumns settings with which to initialize the table:

[code]
var aoColumns;

$.ajax( {
"dataType": 'json',
"type": "POST",
"url": "http://mydomain.com/aoColumns_data",
"success": function(data){
aoColumns = data.aoColumns
}
} );

$('#example').dataTable( {
"aoColumns": aoColumns
} );
[/code]

- Chris

(NOTE: this is untested, and your server-side script would have to return the aoColumns array in the format needed by DataTables)

skione

I have having a little difficulty with format for columns, could you confirm whether this is right?

"aoColumns":[{"sTitle":"id"},{"sTitle":"phone"},{"sTitle":"message"},{"sTitle":"status"}]

ChrisGedrim

That's correct for the client side (js)

skione

Thanks for you help.

Here is the code:
[code]
$.ajax({
url: 'report_generator.php?action=PrepTable',
dataType: 'json',
type: 'post',
data: $('#ReportForm').serialize(),
error: function() {
return true;
},
success: function(data) {
if( data )
{
if (data.status == 'success') {
aoColumns = data.aoColumns;
$('#ReportGeneratorControls').hide();
$('#ReportSection').show();
$('#ReportSection').html('');
TableTools.DEFAULTS.aButtons = [ "copy", "csv", "pdf", "print" ];
console.log(aoColumns);
$('#ReportTable').dataTable({
'sDom': 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [
"copy",
"csv",
"pdf",
"print",
{
"sExtends": "text",
"sButtonText": "Export All",
"fnComplete": function ( nButton, oConfig, oFlash, sFlash ) {
$.ajax({
url: 'report_exporter.php',
dataType: 'json',
type: 'post',
data: $('#form1').serialize(),
error: function() {
return true;
},
success: function(data) {
if( data )
{
if (data.status == 'success') {
$("#ExportedFileSection").show();
$("#ExportedFile").attr("href", data.filename);
}
}
}
});
}
}
]
},
'aoColumns': aoColumns,
'bProcessing': true,
'bServerSide': true,
'sAjaxSource': 'report_generator.php?action=Generate',
'fnServerData': function ( sSource, aoData, fnCallback ) {
$('#ReportForm :input').each(function(){
aoData.push({"name": $(this).attr('name'),"value":$(this).val()});
});
$.ajax({
'dataType': 'json',
'type': 'POST',
'url': sSource,
'data': aoData,
'success': fnCallback
});
}
} );
$('#Busy').hide();
} else if (data.status == 'error') {
alert('An error occured retrieve report options');
}
}
}
});
[/code]

This is how I formed the aoColumns array in PHP:
[code]
foreach ($sColumns as $s) {
$output['aoColumns'][]['sTitle'] = $s;
}
[/code]

ChrisGedrim

So, assuming you were using php you would need to do something like this as your ajax method:

[code]
<?php
echo json_encode(
array(
array(
'sTitle' => 'id'
),
array(
'sTitle' => 'phone'
),
array(
'sTitle' => 'message'
),
array(
'sTitle' => 'status'
),
)
);
[/code]

skione

Chris,

Thanks again, you responded so quickly. I figured it out and edited my post.

Ski