Python Backend JSON dump via Jquery AJAX Call

Unix_Guy

I have a demo backend code in a python script:

[code]
#!/usr/local/bin/python

import cgi
import MySQLdb
import json

print "Content-Type: application/json"
print

displaylength =5
result = {'iDisplayLength':str(displaylength), 'sPaginationType':'full_numbers', 'bProcessing':1, 'bDestroy': 1, 'bRetrieve':1, 'aaData':[{'First Field':'First Field Value', 'Second Field':'Second Field Value', 'Third Field':'Third Field Value', 'Fourth Field':'Fourth Field Value', 'Fifth Field':'Fifth Field Value', 'Sixth Field':'Sixth Field Value', 'Seventh Field':'Seventh Field Value', 'Eight Field':'Eight Field Value', 'Nineth Field':'Nineth Field Value'}, {'First Field':'First Field Value', 'Second Field':'Second Field Value', 'Third Field':'Third Field Value', 'Fourth Field':'Fourth Field Value', 'Fifth Field':'Fifth Field Value', 'Sixth Field':'Sixth Field Value', 'Seventh Field':'Seventh Field Value', 'Eight Field':'Eight Field Value', 'Nineth Field':'Nineth Field Value'}], 'aoColumns':[{'sTitle':'First Field', 'mDataProp': 'First Field'},{ 'sTitle':'Second Field', 'mDataProp': 'Second Field'}, {'sTitle':'Third Field', 'mDataProp': 'Third Field' }, { 'sTitle':'Fourth Field', 'mDataProp': 'Fourth Field' }, { 'sTitle':'Fifth Field' , 'mDataProp': 'Fifth Field' }, { 'sTitle':'Sixth Field', 'mDataProp': 'Sixth Field' }, { 'sTitle':'Seventh Field', 'mDataProp': 'Seventh Field' }, { 'sTitle':'Eight Field', 'mDataProp': 'Eight Field' }, { 'sTitle':'Nineth Field', 'mDataProp': 'Nineth Field' }]}

json_string = json.dumps(result)
print json_string

[/code]

While in client side I have Jquery AJAX success call script:

[code]
function runreport(datastring)
{
$.ajax({
type: "POST",
url: "runsearch.py",
data:
{
'form_data' : datastring
},
success: function(json)
{
$("div#report_result").show();
var oTable = $('#example').dataTable( {
"iDisplayLength": json.iDisplayLength,
"sPaginationType": json.sPaginationType,
"bProcessing": true,
"bDestroy": true,
"bRetrieve": true,
"aaData": json.aaData,
"aoColumns": json.aoColumns
} );
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
},
error:function(xhr,err)
{
alert("Failed\nreadyState: "+xhr.readyState+"\nstatus: "+xhr.status + "\nresponseText: "+xhr.responseText);
}
});
}

[/code]


My first issue is that even if I set and access json.bProcessing, json.bDestroy and json.bRetrieve from the backend program on re-submit the page gives me below issue:

[quote]
DataTables warning (table id = 'example'): Cannot reinitialise DataTable.

To retrieve the DataTables object for this table, please pass either no arguments to the dataTable() function, or set bRetrieve to true. Alternatively, to destory the old table and create a new one, set bDestroy to true (note that a lot of changes to the configuration can be made through the API which is usually much faster).
[/quote]

Making them set as 'true' in the html file resolves the issue however [as mentioned in the above code]

Also I would like to know that in case if I have say 1000 result rows created by backend how would the DataTables performance be? Is there a way that on click of "previous", "next", "" .. I can retrieve required row sets from 1000 result set . I mean no need to load all 1000 row set, the DataTables would render required result set from 1000 result set.

If in case there is an example which states the best efficient and performance oriented way of running back-end code and rendering data in DataTables please let me know?

allan

bDestroy and bRetrieve are mutually exclusive - use only one of them (you don't want to retrieve and destroy the table at the same time!).

Allan

allan

> Also I would like to know that in case if I have say 1000 result rows created by backend how would the DataTables performance be?

Fine :-). 1000 rows is no problem. If using IE6 then 2000 rows you might want to consider Ajax loading with deferred rendering, but modern browsers will be fine in default mode to about 6'000 records. Then Ajax loading with deferred rendering up-to about 20'000 records, and for more (millions for example) use server-side processing. See http://datatables.net/usage/#data_sources for more information.

Allan

Unix_Guy

I had initially tried using bDestroy alone itself - but UI constantly gave error. I have now an alert in my code to print the values returned from backend:

[code]
success: function(json)
{
alert(JSON.stringify(json, null, 4));
$("div#report_result").show();
var oTable = $('#example').dataTable( {
"iDisplayLength": json.iDisplayLength,
"sPaginationType": json.sPaginationType,
"bProcessing": json.bProcessing,
"bDestroy": true,
"aaData": json.aaData,
"aoColumns": json.aoColumns
} );
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
},
[/code]

I see the following values in the alert along with others:

[code]
{
"bDestroy": "true",
"bRetrieve": "true",
"bProcessing": "true",
...............................
}
[/code]


Now if use the code in HTML page below way I am constantly receiving the same error:

[code]
"iDisplayLength": json.iDisplayLength,
"sPaginationType": json.sPaginationType,
"bProcessing": json.bProcessing,
"bDestroy": json.bDestroy,
"aaData": json.aaData,
"aoColumns": json.aoColumns
[/code]

whether it be "bRetrieve" or "bDestroy" which I set as received in the JSON response from backend. So hard coding them was the only option [which also resoled the issue]

[code]
"bDestroy": true,
[/code]

Note I tried setting them differently in my response - but it did not helped - Am I missing something here?

[code]
{"bDestroy": "true", "bProcessing": "true", "bRetrieve": "true", ..}
{"bDestroy": 1, "bProcessing": 1, "bRetrieve": 1, ..}
[/code]


A great thanks for the http://datatables.net/usage/#data_sources pointer. AJAX and Server Side scripting does seems a promising techniques for my issue.


Please note that my backend Python script is called in below way:

[code]
$.ajax({
type: "POST",
url: "runsearch.py",
data:
{
'form_data' : datastring
},
success: function(json)
{
...
}
});
[/code]

The datastring (name value pair ex start=13245000&email_id=z.com&..] is passed as a param to the backend runsearch.py script which parses the query string as created from client code. So the query string can have a token id, a batch id, a error number, a email-id etc. The backend code creates and executes required SQL based upon values passed from client code:

[code]
select * from table_name where e-mail_id = ' ....'
OR
select * from table_name where e-mail_id = ' ....' and error_code = ...
OR
select * from table_name where e-mail_id = ' ....' and error_code = ... and date in between start and end
And so on - result set is dumped in JSON format for datatables at UI
[/code]

In such a case please let me know how I can make use of AJAX Source for deferring rendering data into datatables. I am not sure how should I code both fnServerData and my backend code.

While server side scripting seems modification at the backend side [no UI/ client side code changes or special implementation - please confirm]. I can let the client code be like I have now:

[code]
function runreport(datastring)
{
$.ajax({
type: "POST",
url: "runsearch.py",
data:
{
'form_data' : datastring
},
success: function(json)
{
alert(JSON.stringify(json, null, 4));
$("div#report_result").show();
var oTable = $('#example').dataTable( {
"iDisplayLength": json.iDisplayLength,
"sPaginationType": json.sPaginationType,
"bProcessing": json.bProcessing,
"bDestroy": true,
"aaData": json.aaData,
"aoColumns": json.aoColumns
} );
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
},
error:function(xhr,err)
{
alert("Failed\nreadyState: "+xhr.readyState+"\nstatus: "+xhr.status + "\nresponseText: "+xhr.responseText);
}
});
[/code]

But please provide us how should we code the backend script then - I mean how would client load only say X [or configurable number of] rows of data and hit backend again for remaining data as user navigates to datatables pages. An example for same would be an added advantage.

Thanks in advance

Unix_Guy

I was trying the below client side code but could not achieve the objective rather call backend script and display the static dataset:

[code]
function runreport(datastring)
{
var oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "runsearch.py",
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function(json) {
$("div#report_result").show();
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
}
} );
}
} );
}
[/code]

How the values for sSource, aoData, fnCallback would get populated? Please direct me how to code the client and server side code for server side scripting as I see it to be the perfect approach for my project.

Thansk again in advance.

Unix_Guy

I saw this backend code http://datatables.net/development/server-side/python_mysql . If this is a sample approach how would we pass user defined query string, sEcho, sSearch, iSortCol_0 etc CGI variables from client side to server script. Note thru our UI we take user's various inputs like - start / end dates, token, account details and that we might need to query multiple tables before script generates the result set?

Unix_Guy

I am getting this error in FireBug:

[code]
k is undefined
[Break On This Error]

...Sorting=="undefined"&&typeof e.saved_aaSorting=="undefined")e.aaSorting[a][1]=k....

jquery....min.js (line 150)
[/code]

How should the client / server side coding be for server side processing?

Unix_Guy

Can anyone please let me know the required setup at Client / Server side code for server side scripting? Is it done the normal way i.e. make an AJAX call and server script will return data and datatables would display it in optimizing way (rows > 1 million) or there is a deferred rendering mechanism to be implemented in server side scripting.

Please clarify - if there is a mechanism for deferred rendering then please provide some reference of Client / Server side code for implementation?

allan

The documentation for server-side processing should cover this: http://datatables.net/usage/server-side .

Allan

Unix_Guy

Thanks Allan - but what code needs to there at the client (HTML page) side for server side processing? Also how would pass the parameters to the server like iDisplayStart etc? How does the whole approach work - how the clinet would interact with server script to get next sets of rows - where will the fetched rows be cached?

I would be highly thankful if you could point to some sample approach.

Unix_Guy

Can anyone please provide me some code directions for developing the server side processing - what needs to be coded in client and server side and how?

It would help me a lot.

Thanks in advance.

allan

The documentation for the client-side protocol when using server-side processing is here: http://datatables.net/usage/server-side . There are a number of example implementations here: http://datatables.net/development/server-side/

Allan

Unix_Guy

Allan all the way your help is excellent and very needful.
[quote]Client Side Coding Method 1[/quote]
[code]
function runreport(datastring)
{
var oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/cgi-bin/runsearch.py",
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "form_data", "value": datastring } );
},
"sServerMethod": "POST"
});

function fnCallback(json)
{
$("div#report_result").show();
var oTable = $('#example').dataTable( {
"iDisplayLength": json.iDisplayLength,
"sPaginationType": json.sPaginationType,
"bProcessing": json.bProcessing,
"bDestroy": true,
"aaData": json.aaData,
"aoColumns": json.aoColumns
});
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
}
}
[/code]
However I get below error [I am sure that it is not from any other part of the code apart from above code]:
[code]
k is undefined
[Break On This Error]
...Sorting=="undefined"&&typeof e.saved_aaSorting=="undefined")e.aaSorting[a][1]=k....
jquery....min.js (line 150)
[/code]
I am using the below Jquery versions scripts
[quote]jquery-1.7.1.min.js[/quote]
[quote]jquery-ui-1.8.18.custom.min.js[/quote]
Due to constant error and unable to resolve the issue I changed the client side code like below:
[quote]Method 2[/quote]
[code]
function runreport(datastring)
{
$.ajax({
type: "POST",
url: "/cgi-bin/runsearch.py",
data:
{
'form_data' : datastring
},
success: function(xml)
{
$("div#report_result").show();
var oTable = $('#example').dataTable( {
"iDisplayLength": json.iDisplayLength,
"sPaginationType": json.sPaginationType,
"bProcessing": true,
"bDestroy": true,
"bRetrieve": true,
"aaData": json.aaData,
"aoColumns": json.aoColumns
} );
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
},
error:function(xhr,err)
{
alert("Failed\nreadyState: "+xhr.readyState+"\nstatus: "+xhr.status + "\nresponseText: "+xhr.responseText);
}
});
}
My code UI side works fine with below back end implementation:
[code]
#!/usr/local/bin/python
#runsearch.py
import cgi
import MySQLdb
import json
print "Content-Type: application/json"
print
displaylength =5
result = {'iDisplayLength':str(displaylength), 'sPaginationType':'full_numbers', 'bProcessing':1, 'bDestroy': 1, 'bRetrieve':1, 'aaData':[{'First Field':'First Field Value', 'Second Field':'Second Field Value', 'Third Field':'Third Field Value', 'Fourth Field':'Fourth Field Value', 'Fifth Field':'Fifth Field Value', 'Sixth Field':'Sixth Field Value', 'Seventh Field':'Seventh Field Value', 'Eight Field':'Eight Field Value', 'Nineth Field':'Nineth Field Value'}, {'First Field':'First Field Value', 'Second Field':'Second Field Value', 'Third Field':'Third Field Value', 'Fourth Field':'Fourth Field Value', 'Fifth Field':'Fifth Field Value', 'Sixth Field':'Sixth Field Value', 'Seventh Field':'Seventh Field Value', 'Eight Field':'Eight Field Value', 'Nineth Field':'Nineth Field Value'}], 'aoColumns':[{'sTitle':'First Field', 'mDataProp': 'First Field'},{ 'sTitle':'Second Field', 'mDataProp': 'Second Field'}, {'sTitle':'Third Field', 'mDataProp': 'Third Field' }, { 'sTitle':'Fourth Field', 'mDataProp': 'Fourth Field' }, { 'sTitle':'Fifth Field' , 'mDataProp': 'Fifth Field' }, { 'sTitle':'Sixth Field', 'mDataProp': 'Sixth Field' }, { 'sTitle':'Seventh Field', 'mDataProp': 'Seventh Field' }, { 'sTitle':'Eight Field', 'mDataProp': 'Eight Field' }, { 'sTitle':'Nineth Field', 'mDataProp': 'Nineth Field' }]}

json_string = json.dumps(result)
print json_string
[/code]
Which method [quote]Method 1[/quote],[quote]Method 2[/quote] is the correct way of implementing for datatables to process server side implementation [A sample of back end Python sample code - http://datatables.net/development/server-side/python_mysql]?
Note I need to pass additional data as collected in the UI side into string "datastring"
Can you please clarify my coding at UI / client-side and that datatables will periodically call back end to fetch and render data on the browser.
Please confirm? Am I missing something here?

Unix_Guy

I made some progress regarding the issue I was facing at UI side. I found that I needed to add the below param mandatory to aviod the error:

[code]"aaSorting": [][/code]

So I have my client side code like below:
[code]
function runreport(datastring)
{
function fnCallback(json)
{
alert(JSON.stringify(json, null, 4));
$("div#report_result").show();
var oTable = $('#example').dataTable( {
"iDisplayLength": json.iDisplayLength,
"sPaginationType": json.sPaginationType,
"bProcessing": json.bProcessing,
"bDestroy": true,
"aaData": json.aaData,
"aoColumns": json.aoColumns
});
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
}

var oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "form_data", "value": datastring } );
},
"sAjaxSource": "/cgi-bin/runsearch.py",
"fnServerData": function ( sSource, aoData, fnCallback ) {
alert(sSource);
alert(JSON.stringify(aoData, null, 4));
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"sServerMethod": "POST",
"aaSorting": []
});

}

[/code]

And my backend dumps data correctly:

[code]
/bin/cgi-bin 1126> curl "http://server.com:8381/cgi-bin/runsearch.py"
Content-Type: application/json

{"sPaginationType": "full_numbers", "bDestroy": "true", "iTotalRecords": "2", "aaData": [{"First Field": "First Field Value", "Seventh Field": "Seventh Field Value", "Nineth Field": "Nineth Field Value", "Second Field": "Second Field Value", "Fourth Field": "Fourth Field Value", "Fifth Field": "Fifth Field Value", "Eight Field": "Eight Field Value", "Sixth Field": "Sixth Field Value", "Third Field": "Third Field Value"}, {"First Field": "First Field Value", "Seventh Field": "Seventh Field Value", "Nineth Field": "Nineth Field Value", "Second Field": "Second Field Value", "Fourth Field": "Fourth Field Value", "Fifth Field": "Fifth Field Value", "Eight Field": "Eight Field Value", "Sixth Field": "Sixth Field Value", "Third Field": "Third Field Value"}], "bSort": "false", "bProcessing": "true", "iDisplayLength": "5", "aoColumns": [{"sTitle": "First Field", "mDataProp": "First Field"}, {"sTitle": "Second Field", "mDataProp": "Second Field"}, {"sTitle": "Third Field", "mDataProp": "Third Field"}, {"sTitle": "Fourth Field", "mDataProp": "Fourth Field"}, {"sTitle": "Fifth Field", "mDataProp": "Fifth Field"}, {"sTitle": "Sixth Field", "mDataProp": "Sixth Field"}, {"sTitle": "Seventh Field", "mDataProp": "Seventh Field"}, {"sTitle": "Eight Field", "mDataProp": "Eight Field"}, {"sTitle": "Nineth Field", "mDataProp": "Nineth Field"}], "sEcho": 1, "iTotalDisplayRecords": "2"}
[/code]

But still at client side I do not see any datatables rows? The alert in fnCallback function is not at all gets called?

Am I missing something here?

Unix_Guy

I tried really hard my side but I am not getting output at UI side.

Backend code:

[code]
#!/usr/bin/python


import cgi
import MySQLdb

print "Content-Type: text/plain\n\n"

_columns = [ 'id', 'question', 'pub_date' ]
_indexColumn = "id";
_sTable = "polls_poll";


_databaseInfo = dict(
host = "localhost",
user = "xxxxx",
passwd = "yyyyyyy",
db = "test"
)

_vsEcho=1
form = cgi.FieldStorage()
if form.has_key ('sEcho'):
_vsEcho = form['sEcho'].value

class DataTablesServer:
def __init__( self ):
self.cgi = cgi.FieldStorage()
self.dbh = MySQLdb.connect(host=_databaseInfo['host'], user=_databaseInfo['user'], \
passwd=_databaseInfo['passwd'], db=_databaseInfo['db'])
self.resultData = None
self.cadinalityFiltered = 0
self.cadinality = 0

self.runQueries()
self.outputResult()


def outputResult( self ):
output = '{'
output += '"sEcho": '+str(int(_vsEcho))+', '
output += '"iTotalRecords": '+str(self.cardinality)+', '
output += '"iTotalDisplayRecords": '+str(self.cadinalityFiltered)+', '
output += '"aaData": [ '

for row in self.resultData:
output += '['
for i in range( len(_columns) ):
output += '"'+ str(row[ _columns[i]]) + '",'

output = output[:-1]
output += '],'
output = output[:-1]
output += '] }'

print output


def runQueries( self ):
# Get the data
dataCursor = self.dbh.cursor( cursorclass=MySQLdb.cursors.DictCursor )
dataCursor.execute( """
SELECT SQL_CALC_FOUND_ROWS %(columns)s
FROM %(table)s %(where)s %(order)s %(limit)s""" % dict(
columns=', '.join(_columns), table=_sTable, where=self.filtering(), order=self.ordering(),
limit=self.paging()
) )
self.resultData = dataCursor.fetchall()

cadinalityFilteredCursor = self.dbh.cursor()
cadinalityFilteredCursor.execute( """
SELECT FOUND_ROWS()
""" )
self.cadinalityFiltered = cadinalityFilteredCursor.fetchone()[0]

cadinalityCursor = self.dbh.cursor()
cadinalityCursor.execute( """
SELECT COUNT(%s)
FROM %s
""" % (_indexColumn, _sTable ))
self.cardinality = cadinalityCursor.fetchone()[0]


#
# filtering
# Create the 'WHERE' part of the SQL string
#
def filtering( self ):
filter = ""
if ( self.cgi.has_key('sSearch') ) and ( self.cgi['sSearch'].value != "" ):
filter = "WHERE "
for i in range( len(_columns) ):
filter += "%s LIKE '%%%s%%' OR " % (_columns[i], self.cgi['sSearch'].value)
filter = filter[:-3]
return filter


#
# ordering
# Create the 'ORDER BY' part of the SQL string
#
def ordering( self ):
order = ""
if (self.cgi.has_key('iSortCol_0')) and (self.cgi['iSortCol_0'].value != "") and (self.cgi.has_key('iSortingCols')) and (self.cgi['iSortingCols'].value > 0):
order = "ORDER BY "
for i in range( int(self.cgi['iSortingCols'].value) ):
order += "%s %s, " % (_columns[ int(self.cgi['iSortCol_'+str(i)].value) ], \
self.cgi['sSortDir_'+str(i)].value)
return order[:-2]


#
# paging
# Create the 'LIMIT' part of the SQL string
#
def paging( self ):
limit = ""
if (self.cgi.has_key('iDisplayStart') and ( self.cgi['iDisplayStart'] != "" ) and self.cgi.has_key('iDisplayLength')) and ( self.cgi['iDisplayLength'] != -1 ):
limit = "LIMIT %s, %s" % (self.cgi['iDisplayStart'].value, self.cgi['iDisplayLength'].value )
return limit

# Perform the server-side actions for DataTables
dtserver=DataTablesServer()

[/code]


I get :

[code]
bin/cgi-bin 1139> curl "http://server.com:1234/cgi-bin/runsearch.py"

{"sEcho": 1, "iTotalRecords": 1, "iTotalDisplayRecords": 1, "aaData": [ ["1","What's up?","2012-02-26 18:36:42"]] }
[/code]

This is my client side code:

[code]
function runreport(datastring)
{
var oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "form_data", "value": datastring } );
},
"sAjaxSource": "/cgi-bin/runsearch.py",
"fnServerData": function ( sSource, aoData, fnCallback ) {
alert(sSource);
alert(JSON.stringify(aoData, null, 4));
alert(JSON.stringify(fnCallback, null, 4));
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"sServerMethod": "POST",
"aaSorting": []
});
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
}

[/code]

I get the output in FireBug:

[code]
POST http://server.com:1234/cgi-bin/runsearch.py 200 OK 629ms jquery....min.js (line 4)
HeadersPostResponseJSON


{"sEcho": 1, "iTotalRecords": 1, "iTotalDisplayRecords": 1, "aaData": [ ["1","What's up?","2012-02-26 18:36:42"]] }
[/code]

But still nothing is displayed in datatables?

Alert of aoData prints below values:

[code]
[
{
"name": "sEcho",
"value": 1
},
{
"name": "iColumns",
"value": 0
},
{
"name": "sColumns",
"value": ""
},
{
"name": "iDisplayStart",
"value": 0
},
{
"name": "iDisplayLength",
"value": 10
},
{
"name": "sSearch",
"value": ""
},
{
"name": "bRegex",
"value": false
},
{
"name": "iSortingCols",
"value": 0
},
{
"name": "form_data",
"value": "pools_name=2&start_date=1335830400&end_date=1337644800&emailaddress=emailId@domain.com&state=false&city=true&country=false&SA=false&language=true&region=false&group1=no&log_id=&relation=&group2=collapse_yes&time=Tue May 22 2012 16:38:40 GMT+0530"
}
]
[code]

I am not sure where I am doing something wrong and how can it be resolved?

Unix_Guy

I partially resolved my issue:

[code]
$("div#report_result").show();
[/code]

But I am not seeing any Headers / rows in result pages. Instead I see only below section:

[code]
Show entries: Search:
Showing 1 to 2 of 2 entries
[/code]

Note the column and rows set are missing?

Unix_Guy

I got the issue and resolved it. My HTML script for table itself was not there. Most of the web pages had content discussing examples using Datatables but did not talk about the HTML part. The client side scripting does need to have HTML code (create tables) with Datatables script.

I though of sharing of how dynamically I am able to create HTML table and couple Datatable to it which much of the examples did not mention here. Below is the code:

[code]






var tables_header ='';
$('#example').empty();
tables_header = $('Default Columns');
for (var i=0;i