How to pass data manually to datatables

shades88

I am trying datatables. I successfully tried on ajax call. But now I am looking for loading my data grid, using datatables of course, on page load.

I need to pass arguments to my processing page via querystring. Page does the operation and then a template file shows the datagrid. This all was being done in smarty using manual foreach and other loops. Now I want to convert it all to datatables.

But how that initial data is going be passed to datatables? Therefore I need to pass initial data to datatables, but how? Please help

I wish to do something like this

[code]
<?php
//get params from $_GET
$dbRet = someDbOps($someGetParams); //db processing
include_once('grid.tpl');
?>
[/code]

on grid.tpl

[code]







var data = '<?php echo $dbRet?>'; //now i got data here
$('#one-column-emphasis').dataTable({
"bProcessing" : true,
"bServerSide" : true,
"sAjaxSource" : "changeLog.php",
"bPaginate" : true,
"aoColumns" : [ "Topic", "Details", "Date" ],
"aaSorting" : [[1,"desc"]]
}); // how to pass $dbRet to this handler????










[\code]

Fortega

Passing initial data is the simplest part of datatables, just render a html-table with content...

So in your should use php to render the initial table with contents...
So the output of your php code becomes for example



data
more data
...


row2
22
23

shades88

I am coming across a lot of difficulties while using DataTables. I have a page where I need to submit a couple of fields and on that basis I need to get output from DB. For this purpose, I use my own ajax wrapper. I get result variable on success. I check result.error, if it is 0 then I go ahead and pass result.data to datatables handler. So for this to happen I have removed bServerSide, bProcessing and sAjaxSource properties. But after I have loaded data in datatables, I want datatable to resume ajax for pagination, sorting, record size etc. But how am I gonna do it? And on these actions I need to pass all search params entered by user again to processing page, how can that be achieved?
For reference this is a function that will clear up what I am trying to do
[code]
var tn = '{$tableName}';

$('#submit').click(function(){
//========= getting data here=========//
var from = $('#from') .val();
var to = $('#to').val();
var event = $('#event').val();
var search = $('#search').val();
//========= some validation =========//
if(from == '' || to == ''){
errorBox('Please specify date range','w');
return false;
}
if(search == ''){
errorBox('Please specify site name to search','w');
return false;
}
//========== ajax call params and call to ajax handler ============//
var params = "ajax=1&from="+from+"&to="+to+"&evt="+event+"&tn="+tn+"&s="+search;
callAjax(params, 'tableChangeLog.php', 'GET', function(result){ //custom ajax wrapper
console.log(result);
if(result.error == 0){
//call DataTables
var data = result.aaData;
$('#one-column-emphasis').dataTable({ // DataTables handler
"aaData" : data,
"bDestroy" : true,
"iTotalRecords" : result.iTotalRecords,
"iTotalDisplayRecords" : result.iTotalDisplayRecords,
"bSorting" : true,
"bPaginate" : true,
"aoColumns" : [ { "mDataProp":"ph_prod_pub_site_country_mapping_change_log_id" },
{ "mDataProp":"prod_pub_site_country_mapping_self_id" },
{ "mDataProp":"prod_pub_site_master_id" },
{ "mDataProp":"country_code" },
{ "mDataProp":"country_code" },
{ "mDataProp":"user_id" },
{ "mDataProp":"user_type" },
{ "mDataProp":"creation_date" },
{ "mDataProp":"change_log_date" },
{ "mDataProp":"event_type" }]
});
}else{
if(result.msg != undefined && result.msg != ''){
errorBox(result.msg,'e');
}else{
errorBox('Error while fetching the data. Please try again.','e');
}
}
});
});
[/code]

Please....please...somebody help. I am stuck since last 2 days :(