Datatable and pipelining feature
Datatable and pipelining feature
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
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
This discussion has been closed.
Replies
> 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
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
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
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
Sam.
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
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