How to use horizontal and vertical scrolling with server side processing ?

kavittp

Dear Allan,
I am using 'Datatable Jquery plugin' with server side processing in my application. Now i want to use Horizontal and Vertical Scroll Bars in the datatable.
So to implement this, i used 'sScrollX', 'sScrollXInner' and 'sScrollY' in datatable code (as mentioned below) :
[code]
"sScrollX": "100%",
"sScrollXInner": "110%",
"sScrollY": 200,
[/code]

after this, when i executed my application...the data did not come in datatable and an error occured in browser like "Object doesn't support this property or method" and its indicating error in 'jquery.dataTables.js' javascript file.

Here I am sharing the URL of screenshots of datatable and error occured respectively :

Below URL shows the datatable, where data didn't came and scrollbars also not showing in a proper way.
https://www.evernote.com/shard/s378/sh/f6545ba1-e13d-4c74-9601-3792359d4a72/d2a2db7469692312ebdb4d07fd94871b

Below URL shows the error, which comes when datatable initialised.
https://www.evernote.com/shard/s378/sh/8a522ebb-77eb-43a2-a31c-d8ca767eaf00/8beec6f04df61be6babbca1c2ce6bd5b

Below are the javascript and HTML Code what we are using in my application :

Javascript Code :

[code]



$(document).ready(function()
{

TableTools.BUTTONS.download = {
"sAction": "text",
"sTag": "default",
"sFieldBoundary": "",
"sFieldSeperator": "\t",
"sNewLine": "
",
"sToolTip": "Download Excel",
"sButtonClass": "DTTT_button_xls", //eariler was "DTTT_button_text"
"sButtonClassHover": "DTTT_button_xls_hover", //earlier was "DTTT_button_text_hover"
"sButtonText": "Download",
"mColumns": "all",
"bHeader": true,
"bFooter": true,
"sDiv": "",
"fnMouseover": null,
"fnMouseout": null,
"fnClick": function( nButton, oConfig ) {
var oParams = this.s.dt.oApi._fnAjaxParameters( this.s.dt );
var iframe = document.createElement('iframe');
iframe.style.height = "0px";
iframe.style.width = "0px";
iframe.src = oConfig.sUrl+"?"+$.param(oParams);
document.body.appendChild( iframe );
},
"fnSelect": null,
"fnComplete": null,
"fnInit": null

};



$('#id_submit').click(function() {

$("#prepack").dataTable({
"bDestroy":true,
"bRetrieve": false,
"bJQueryUI": true,
"bServerSide": true,
"bAutoWidth": true,
"sAjaxSource": "/demo_trial_application/DatasourceGsonServlet",
"bProcessing": true,
"sPaginationType": "full_numbers",
"sScrollX": "100%",
"sScrollXInner": "110%",
"sScrollY": 200,
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [ "copy","csv","xls","pdf"],
"sSwfPath": "./table_tool2.0/media/swf/copy_cvs_xls_pdf.swf"
},
"aaSorting":[[0,'desc']]

});

});



});





[/code]


HTML Code :

[code]














Site_id
Low_ord_srl_no
Start Date
Pass Flag
Emp_no
Last Update
ETL_batch_id





Loading Data From Server...











[/code]

Please tell me if anything wrong in above mentioned code...I am getting error (as mentioned) at the time of server side processing..hence scroll bar not showing and data are also not coming..

Please help me to sort out these issue...it very much urgent for my application.

Thanks in advance.. :)

kavittp

Dear Allan,
Please help me to sort out this issue..i am not able to find out proper solution for this problem.