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

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

veenabaluveenabalu Posts: 15Questions: 0Answers: 0
edited March 2014 in DataTables 1.9
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

Replies

  • AllanCochraneAllanCochrane Posts: 41Questions: 1Answers: 2
    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.
  • veenabaluveenabalu Posts: 15Questions: 0Answers: 0
    edited 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
  • allanallan Posts: 54,914Questions: 1Answers: 8,608 Site admin
    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
  • veenabaluveenabalu Posts: 15Questions: 0Answers: 0
    edited 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
  • allanallan Posts: 54,914Questions: 1Answers: 8,608 Site admin
    > 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
  • veenabaluveenabalu Posts: 15Questions: 0Answers: 0
    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
  • veenabaluveenabalu Posts: 15Questions: 0Answers: 0
    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
  • allanallan Posts: 54,914Questions: 1Answers: 8,608 Site admin
    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
  • veenabaluveenabalu Posts: 15Questions: 0Answers: 0
    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
  • veenabaluveenabalu Posts: 15Questions: 0Answers: 0
    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
  • veenabaluveenabalu Posts: 15Questions: 0Answers: 0
    Am not using the css for dataTable and FixedColumns.
  • allanallan Posts: 54,914Questions: 1Answers: 8,608 Site admin
    Sorry - I would need a link to a test case to be able to offer any further help.
  • veenabaluveenabalu Posts: 15Questions: 0Answers: 0
    Please check the below link:
    http://jsfiddle.net/Nv2Qr/1/

    Reply asap.

    Thanks,
    Veena
  • allanallan Posts: 54,914Questions: 1Answers: 8,608 Site admin
    > 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
  • veenabaluveenabalu Posts: 15Questions: 0Answers: 0
    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
  • allanallan Posts: 54,914Questions: 1Answers: 8,608 Site admin
    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
  • veenabaluveenabalu Posts: 15Questions: 0Answers: 0
    edited 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
  • veenabaluveenabalu Posts: 15Questions: 0Answers: 0
    Allan,

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

    Thanks,
    Veena
  • allanallan Posts: 54,914Questions: 1Answers: 8,608 Site admin
    I will do. I'll post back as soon as I can answer answer.

    Allan
  • veenabaluveenabalu Posts: 15Questions: 0Answers: 0
    Thanks a lot Allan :)
  • veenabaluveenabalu Posts: 15Questions: 0Answers: 0
    Allan,

    Any update on the above mentioned issue?

    Thanks,
    Veena
  • allanallan Posts: 54,914Questions: 1Answers: 8,608 Site admin
    edited 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
  • veenabaluveenabalu Posts: 15Questions: 0Answers: 0

    Ok Thanks Allan.

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

This discussion has been closed.