Plug-in fails for large amount of data (84000 ) input fields
Plug-in fails for large amount of data (84000 ) input fields
veenabalu
Posts: 15Questions: 0Answers: 0
Hi,
My HTML layout consists of 60 header cols , 1400 rows.
For this large data, plug-in fails. No error is thrown. IE browser says it encountered a problem and gets closed.
I read about the datatables usage: 4 different ways of passing data to the datatable plug-in (Refer: http://datatables.net/usage/)
I believe mine is DOM approach and it failed because of huge data.
Do you think i can try for other 3 approaches:
JavaScript array
Ajax source
Server-side processing
Considering my complicated html structure, kindly suggest me a best approach. Also provide me a link to implement the same.
Thanks,
Veena
My HTML layout consists of 60 header cols , 1400 rows.
For this large data, plug-in fails. No error is thrown. IE browser says it encountered a problem and gets closed.
I read about the datatables usage: 4 different ways of passing data to the datatable plug-in (Refer: http://datatables.net/usage/)
I believe mine is DOM approach and it failed because of huge data.
Do you think i can try for other 3 approaches:
JavaScript array
Ajax source
Server-side processing
Considering my complicated html structure, kindly suggest me a best approach. Also provide me a link to implement the same.
Thanks,
Veena
This discussion has been closed.
Replies
I suggest you debug using Chrome or Firefox. In my experience the developer tools for IE aren't as useful as they are in the other browsers.
I don't think that your table is too big for DataTables to handle though I expect that a JavaScript array might be the fastest approach.
Not sure what you want when you say 'link to implement the same' because the link you already provided is a good starting point for the documentation.
I tried the plug-in with a smaller dataset and it worked fine for me. It fails only when the rows grows in size.
I have the BLL methods and i can have a class(.cs) file with the js array data.
One query at this point of time is, html layout had some colspan and rowspan. I removed them to make the plug-in work. Now since the data is gonna come from js array, can i have them back in my layout. how should i design my html along with formatting to pull the data from js array ? ( share some example)
* formatting requires colspan, rowspan, background colors for the cells based on the column.
Thereafter i have to also use fixedColumns extension on my table for 3 fixed columns.
Let me know the sequence i have to follow for the above task.
Thanks again.
-Veena
Beyond that, Ajax loading with deferred rendering is possibly your best bet.
Allan
Can i use 1.10.0-beta.3.dev version or 1.10.0-beta.2 ?
Will fixedColumns 2.0.3 work along with the beta version or should i take up fixedColumns 3.0 ?
My jquery version is jquery-1.8.3.js
Let me know which version to be used to fix the performance issue. Because, if this doesnt work up i will be going for Ajax stuff.
Thanks,
Veena
You can either one - help yourself :-). I've recommend the beta.3.dev version since it includes all the latest fixes.
Allan
I am using 1.10 beta.2 with jquery 1.8.3
I solved datatable related script errors.
Now facing a problem with fixedColumns. First i tried running version 2.0.3
It throws an error "Unable to get property 0 as null or undefined" for the function _fnclone. I read in one of the forums and removed the server side processing code. But , no luck.
I changed it to fixedColumns 3.0
Now the error is "Unable to support this action"
Please help.
Thanks,
Veena
I fixed the above error. However am not pretty happy with the output.
I can't see the horizontal and vertical scrolls after applying fixedColumns over dataTable.
Please find my code as below:
var maintbwidth, maintbheight;
var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height(); //retrieve current window height
try {
maintbwidth = windowWidth - 200 + "px";
maintbheight = windowHeight - 200 + "px";
var oTable = $('#mainTable').dataTable({
"sScrollY": maintbheight,
"sScrollX": maintbwidth,
"sScrollXInner": "80%",
"bScrollCollapse": true,
"bPaginate": false,
"bSort": false,
"bSearchable": false,
"bVisible": false,
"bFilter": false
});
new $.fn.dataTable.FixedColumns(oTable, {
//leftColumns: 2
"iLeftColumns": 3,
"iLeftWidth": 231
});
//$(fCol.dom.grid.wrapper).width($(fCol.dom.grid.wrapper).width());
alert("Fixed Columns ready..");
$(window).resize(function () {
width = $(window).width();
height = $(window).height();
$("#mainTable").css("width", width);
$("#mainTable").css("height", height);
});
}
catch (err) {
alert(err.description);
alert(err.stack);
alert("Error occured");
}
Result: I can see my left side fixed column text are overlapped. At the top it says classid="..." viewasText">
Please help.
-Veena
Allan
Without applying fixedColumns, i never see a vertical scroll. Also header columns are not in synch with the body columns.
After applying fixedColumns, though the columns come in sync i dont see any kind of separation for the freezedColumn as both the scrolls are missing.
Please check
http://i.imgur.com/qxBqp2d.jpg?1
http://imgur.com/qxBqp2d
for the output renedered.
Thanks
var oTable = $('#mainTable').dataTable({
"sScrollY": maintbheight,
"sScrollX": maintbwidth,
"sScrollXInner": "80%",
"bScrollCollapse": true,
"bPaginate": false,
"bSort": false,
"bSearchable": false,
"bVisible": false,
"bFilter": false
});
new $.fn.dataTable.FixedColumns(oTable, {
"iLeftColumns": 3,
"iLeftWidth": 231
});
What do you think ?
Or is it because i have large no of rows and cols ? 1400 X 60
Kindly advice asap.
Regards,
Veena
http://jsfiddle.net/Nv2Qr/1/
Reply asap.
Thanks,
Veena
I try to...
Thank you for the test case. Unfortunately, it isn't immediately apparent why it isn't working. I'll need to do some debugging on it - but don't have any time to do so this week. it will be next week before I get a chance to do so I think.
Allan
I tried some three plugins..No luck..!! :(
Lastly, i tried dataTables & thought it should definitely help me....i fixed the script errors i came across with dataTable & fixedColumns. But, expected output is not achieved.
Let me give a try again. Will keep you updated.
Many Thanks once again...
-Veena
Allan
I linked the stylesheets for dataTables and fixedColumns. I see that we have to use leftColumns and not iLeftColumns to see the fixedColumn working. Also it doesn't support iLeftWidth.
The horizontal scroll still appears from the left rather than after freezed column.
Please check http://jsfiddle.net/Nv2Qr/7/
But the sad part is, i can't see the scrolls appear on my report.....
Let me know if you come across any solution.
Thanks,
Veena
Keep me updated if you happen to get a fix for the above mentioned issue.
Thanks,
Veena
Allan
Any update on the above mentioned issue?
Thanks,
Veena
Allan
Ok Thanks Allan.
The site seems to be updated...Its cool!! :-)