Plug-in fails for large amount of data (84000 ) input fields

veenabalu · March 2014

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

AllanCochrane · March 2014

Maybe you could start by getting the plugin working with a smaller set of data and work up to the full data set.

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.

veenabalu · March 2014

Thanks Allan for the quick response.
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

allan · March 2014

Try using DataTables 1.10 if you haven't already. That will help performance.

Beyond that, Ajax loading with deferred rendering is possibly your best bet.

Allan

veenabalu · March 2014

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

allan · March 2014

> Can i use 1.10.0-beta.3.dev version or 1.10.0-beta.2 ?

You can either one - help yourself :-). I've recommend the beta.3.dev version since it includes all the latest fixes.

Allan

veenabalu · March 2014

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

veenabalu · March 2014

Allan,

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 · March 2014

Can you please link me to a page showing the rendering error so I can debug it and figure out what is going wrong.

Allan

veenabalu · March 2014

Sorry Alan, i don't have a public url :(
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

veenabalu · March 2014

Guess am going wrong with the values for sScrollX,sScrollY, sScrollInner , iLeftWidth in the below two methods:

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

veenabalu · March 2014

Am not using the css for dataTable and FixedColumns.

allan · March 2014

Sorry - I would need a link to a test case to be able to offer any further help.

veenabalu · March 2014

Please check the below link:
http://jsfiddle.net/Nv2Qr/1/

Reply asap.

Thanks,
Veena

allan · March 2014

> Reply asap.

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

veenabalu · March 2014

Thanks Allan for the reply. But i have to submit this report today.
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 · March 2014

You certainly need to include some CSS for the FixedColumns to make them not transparent. But I'm not sure why there is about a 5px error in the column width. That's the part that I don't understand and will require some investigation.

Allan

veenabalu · March 2014

Hi 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

veenabalu · March 2014

Allan,

Keep me updated if you happen to get a fix for the above mentioned issue.

Thanks,
Veena

allan · March 2014

I will do. I'll post back as soon as I can answer answer.

Allan

veenabalu · April 2014

Thanks a lot Allan :)

veenabalu · April 2014

Allan,

Any update on the above mentioned issue?

Thanks,
Veena

allan · April 2014

Sorry no. I've been busy with other things. As I say, I'll update when I've had a chance to look at it, although I can't say when that will be at the moment. If you require urgent help, priority support is available: http://datatables.net/support .

Allan

veenabalu · May 2014

Ok Thanks Allan.

The site seems to be updated...Its cool!! :-)

Plug-in fails for large amount of data (84000 ) input fields

Plug-in fails for large amount of data (84000 ) input fields

Replies

Howdy, Stranger!

Categories

DataTables

Plug-in fails for large amount of data (84000 ) input fields

Plug-in fails for large amount of data (84000 ) input fields

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables