Datatable and pipelining feature

samuel

Hello,

I am new to datatables. I want to use data table's pipelining feature where i will get around 30K - 90K array of records on client side and then apply pipeline feature to show just say 100 records and when user clicks next or 2, he should see rows from 101 to 200 and so on. I tried the demo (http://datatables.net/examples/server_side/pipeline.html), but there is a need for ajax source "sAjaxSource": "../examples_support/server_processing.php" which is the data in json format. I dont get json from server but its google protocol buffer that am getting and also that php file is a processed file and stored somewhere. How can i do it for google protocol buffer?

Basically my requirements are:

1. I am using struts and data that am getting protocol buffer and getting loads of data around 30K rows together on the client side which is where i am getting script running slowly do you want to abort script call and so on. So i need pipeline feature where i dont want to load all 30K rows instead just say 2K rows. I cant ask server to send 2K rows and then when i click next it will send another 2k rows and so on.
2. I need pagination option.
3. I need fixed header with sort options.
4. I need x,y scrolling options as well.

Currently am using datatables with following config:


g.oTable = $('.display').dataTable({
${stypes}
"bScrollCollapse" : true,
"bPaginate" : false,
"sScrollX": "100%",
"sScrollY": $(window).height()-400
});

Where stypes is "aoColumns":[{"sType":"test-html"},{"sType":"date" },{"sType":"date" },null,null], which decides my sorting algoritm script based on data that my column holds. So i have sort, scroll, fixed header already. In addition i need paginating option for users so that it loads page quickly as said first 5 pages in decoumention and then when user click next the page should reload another set of fresh data and so on?

Also I have an issue with column width on IE and firefox. For free text field, my fixed column header and its value gets misaligned in IE and disturbs the other fields ahead as well while in firefox they adjust each other and helps in good look and feel.


align="center" style="min-height:500px;float: left;" name="mytable" />>


id
name and so on


Can you help me to know what exactly i need to do with both the issues? Let me know if you need css or any other details.

Thanks,
Sam

allan

Hi Sam,

> I dont get json from server but its google protocol buffer that am getting and also that php file is a processed file and stored somewhere. How can i do it for google protocol buffer?

You need to use fnServerData to make your own Ajax call to the server and then process the data that is returned from the server into the JSON format that is required by DataTables: http://datatables.net/usage/server-side . You'll probably also need to translate the parameters DataTables sends to the server, as I doubt Google implement the DataTables parameters such as iDisplayLength :-)

Allan

samuel

Thanks Allan. Do we have a working example which i can play around? I am not sure about the post/pull methodology? Is that post we referring to an HTTP post? Do i need to expose webservice/rest or something on similar lines call?

allan

> Do we have a working example which i can play around?

Have a look at the documentation for fnServerData and implement the example code into your server-side example that you are currently using. I would suggest having a look at, and understanding, how that works before attempting anything more with it. Once you've got that working, then try manipulating the data that has been returned from the server (normal Javascript loops for example).

> Is that post we referring to an HTTP post?

Yes :-)

> Do i need to expose webservice/rest or something on similar lines call?

You might be able to use the Google API directly, but I seriously doubt it, since they won't be implementing DataTables server-side processing.

Allan

samuel

Thanks Allan. Another qq for you. So we already have the code in production where we generate html on the fly using jsp and use datatables. for e.g.





col1
col2
col3





${varName["col1"]}
${varName["col2"]}
${varName["col3"]}





And we have multiple pages with one datatables in each.

Is it possible for me to still use datatables with pipelining someway without ajax?

Thanks,
Sam

allan

I don't really understand the question I'm afraid. If you have all the data at the client-side (which you do here), what benefit would pipelining give you? What benefit would you expect, given that it is caching Ajax responses?

Allan

samuel

I have all the data on the client side and its in simple java object form and not in json format. I am able to display whole of 30K records but user has to be patient and it gives the warning saying script running slow and so on. So my question is,

1. If convertor converts or my server returns json, i wont be needing all the fields of json for e.g. if server returns

{ "demo": [
["Trident","Internet Explorer 4.0","Win 95+","4","X"],
["Trident","Internet Explorer 5.0","Win 95+","5","C"],
["Trident","Internet Explorer 5.5","Win 95+","5.5","A"]
]}


I might just want to display 1,2,5 field and exclude 3rd and 4th field? How can i do that?

2. Variation of requirement, if i want to show fields in order like 1,4,3,2,5 like (["Trident","4","Win 95+","4","Internet Explorer 4.0","X"]) instead of the way its returned by server in datatable, how can i do that?

3. Also i see that my datatable is getting sorted according to first field by default. Is there a way i can i stop sorting on anyfield when table is drawn initially and allow user to choose which field user wantes to sort on?

4. I have sample example with following config and a webservice on server side which returns me the sample hardcoded json object as above in step 2:


$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide":true, "sAjaxSource": "http://localhost:1080/testservice/MYTEST1",
"sAjaxDataProp": "test",
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
oSettings.jqXHR = $.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}
} );
} );



Issue is i have echoed the call on server side, when i try to print the datatable on IE it doesnt hits the server as i cant see anything on console, while on firefox it hits the service but in both the browser, it stalls and shows processing screen. I tried copying the json retrurned from webservice and posted it into the notepad, switched off bserverSide attribute by setting it to false and sAjaxSource to that file and it worked. Am i missing something?

Thanks,
Sam

samuel

Can somebody please help?

Sam.

samuel

Allan any help please? Its creating issue in production.. Or is it not supported by datatables and you suggest me to move to GWT or other framework?

allan

Sorry I haven't had a chance to reply. If you want to ensure a timely reply to messages in future there are support options available: http://datatables.net/support .

So regarding your question:

> I have all the data on the client side and its in simple java object form and not in json format

What does a Java object look like, and how do you get that in Javascript? Are you parsing a string or something? There is no way DataTables will read a Java object, it requires Javascript objects (specifically JSON), so if you have any other format, you need to convert it.

Allan

samuel

Thanks allan.

Yes i am getting the data in json format now. But i am not getting the desired output. Basically here are the things that i wish to know:

1. If server returns

{ "demo": [
["Trident","Internet Explorer 4.0","Win 95+","4","X"],
["Trident","Internet Explorer 5.0","Win 95+","5","C"],
["Trident","Internet Explorer 5.5","Win 95+","5.5","A"]
]}


I might just want to display 1,2,5 field and exclude 3rd and 4th field? How can i do that?

2. Variation of requirement, if i want to show fields in order like 1,4,3,2,5 like (["Trident","4","Win 95+","4","Internet Explorer 4.0","X"]) instead of the way its returned by server in datatable, how can i do that?

3. Also i see that my datatable is getting sorted according to first field by default. Is there a way i can i stop sorting on anyfield when table is drawn initially and allow user to choose which field user wantes to sort on?

4. I have sample example with following config and a webservice on server side which returns me the sample hardcoded json object as above in step 2:


$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide":true, "sAjaxSource": "http://localhost:1080/testservice/MYTEST1",
"sAjaxDataProp": "test",
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
oSettings.jqXHR = $.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}
} );
} );



Issue is i have echoed the call on server side, when i try to print the datatable on IE it doesnt hits the server as i cant see anything on console, while on firefox it hits the service but in both the browser, it stalls and shows processing screen. I tried copying the json retrurned from webservice and posted it into the notepad, switched off bserverSide attribute by setting it to false and sAjaxSource to that file and it worked. Am i missing something?

Thanks,
Sam