Internet Explorer freezes with 400 lines in DataTables

Cololi

Hi,

I'm using DataTables 1.9.4.
On Internet Explorer (IE 11) a DataTable with 400 lines freeze 20 seconds (and finally after this freeze it's ok).
On Firefox and Chrome with the same list => no problem.

Thanks a lot for your help

vogomatix

I can't speak for 1.9.4, but I am aware 1.10.0 rendered much more slowly in IE(9-11) than 1.10.2, when its performance in FF/Chrome was fine.

Try updating DataTables. If you can't or the delay is still there use the IE profiler to find out where the time is being spent

Cololi

I can't update (unfortunatly), because i need to be compatible with IE8.

I did not kow IE Profiler, thank you i'm going to try it.

I can add that the problem seems to be not linear : for 100 lines, or 200 ... the freeze is by far shorter (more than half).

Cololi

IE Profile point "offsetWidth" is the major problem (it's a DOM thing right ?) :
offsetWidth : excluding time = 12046,21 ms and including time = 12046,21 ms

allan

because i need to be compatible with IE8.

1.10.2 is compatible with IE8. In fact it is compatible with IE6.

Are you using FixedColumns or anything else? Its really hard to say what is causing the issue without a test case.

Allan

Cololi

Yes, i was wrong, it is compatible (i mean compatible wirh JQuery 1.9).
I've just upgraded to 1.10.2 and same problem.

I don't use FixedColumns.

The profiler result don't help ? (offsetWith seems the problem)

allan

The profiler result don't help ?

A little bit - it suggests you probably have scrolling enabled, but I really don't know without a test case.

Allan

Cololi

Unfortunatly i can't give a test access :/

What should i check ?

allan

Firstly, if you aren' Ajax loading the data and have deferRender enabled - that is where I would start. See the speed FAQ.

Allan

Cololi

Thanks for yout help.

But it's not my code ... i'm totally newbie in jquery.
I found the datatable declaration, and read the documentation that explain how to link data to datatable.
But i can't find something close to help example. So I can't see if it's Ajax or Dom or anything else whitch load data.

Here is my code :

$("#" + table)
            .bind('page', page)
            .bind('sort', sort)
            .bind('filter', filter)
            .bind('draw', draw)
            .dataTable({
                "oLanguage": {
                    "sLengthMenu": traduction.sLengthMenu,
                    "sZeroRecords": traduction.sZeroRecords,
                    "sInfo": traduction.sInfo,
                    "sInfoEmpty": traduction.sInfoEmpty,
                    "sInfoFiltered": traduction.sInfoFiltered,
                    "sSearch": traduction.sSearch,
                    "oPaginate": {
                        "sFirst": '<img alt="' + traduction.sFirst + '" title="' + traduction.sFirst + '" src="/Img/datatable/first.png" />',
                        "sPrevious": '<img alt="' + traduction.sPrevious + '" title="' + traduction.sPrevious + '" src="/Img/datatable/left.png" />',
                        "sNext": '<img alt="' + traduction.sNext + '" title="' + traduction.sNext + '" src="/Img/datatable/right.png" />',
                        "sLast": '<img alt="' + traduction.sLast + '" title="' + traduction.sLast + '" src="/Img/datatable/last.png" />'
                    },                    
                },
                "bJQueryUI": false,
                "sPaginationType": "full_numbers",
                "aoColumnDefs": [
                    { "bSortable": true, "bSearchable": true, "aTargets": "_all" },
                    { "bSortable": false, "aTargets": ["no-sort"] },
                    { "bSearchable": false, "bSortable": false, "bVisible": bCanRemove, "aTargets": [0] },
                    { "sType": "numeric", "aTargets": numColumns },
                    { "sType": "date", "aTargets": dateColumns },
                    { "sType": "num-html", "aTargets": htmlNumColumns },
                    { "sType": "date-euro", "aTargets": dateEuroColumns },
                    { "sType": "html", "aTargets": htmlColumns },
                    { "sType": "chk", "aTargets": chkColumns },
                    { "sType": "string", "aTargets": stringCol },
                    { "bVisible": false, "aTargets": invisibleCol }
                ],
                "aLengthMenu": lengthMenu,
                "iDisplayLength": lengthMenu[0][0],
                "sDom": sDomValue,
                "bAutoWidth": false
            });

Cololi

(carriage return seems to working :/), sorry

allan

Neither the old style sAjaxSource option or the new ajax option is being used - therefore it is DOM loaded. I would recommend switching to Ajax loading. The data section of the manual will provide information on this topic.

Allan

Cololi

Thanks a lot.
I read documentation, and it seems that Ajax loading only works with text files.
My data are in a sql database (of course).
Is it possible ?

allan

Thanks a lot. I read documentation, and it seems that Ajax loading only works with text files

No - it works with anything that outputs valid JSON. See the Editor examples for examples of using dynamically generated JSON.

Allan

Cololi

Ok. Now the problem is that example are un PHP. I'm using C#.
I'm a bit lost with Json funtion of C#.

allan

I'm currently working on a C# implementation for Editor. I expect a beta to ready at the end of the month and would be happy to send it over to you then. I'm afraid I don't have an immediate solution for you.

Allan

Cololi

And what about server-side ? It seems that no API needed, true ?

allan

I don't quite understand - the C# implementation will be for the server-side. The client-side libraries will work with the existing PHP implementation or the new C# one.

You will still be able to use the Editor and DataTables client-side APIs.

Allan

Cololi

i'm gonna try to explain :

-> with ajax, PHP is required (because library is in PHP). So i can't use ajax

-> in "server-side" (term of the documentation), is it possible to use C# ?

allan

It doesn't matter what is on the server-side, be it C#, PHP, Node.JS, RoR, or anything else. There needs to be soothing to handle the Ajax requests from the client-side.

Yes it is possible to use C# on the server-side. Simply have it return valid JSON and configure your DataTable to consume that JSON data using ajax.dataSrc and columns.data as required.

Allan

Cololi

i'm going to try that. (i will be back, after a long time ... to try to understand examples, and try to code for my problem).

Cololi

Example in php (http://www.datatables.net/examples/data_sources/server_side.html ) seems very strange : what's the link betbween database login/pwd and json ??? And i can't see how to adapt this in C#.
The exemple don't talk about ajax.dataSrc nor colums.data.

vogomatix

The database login/pwd should be in your C# script. The PHP library/class interacting with the DB can be found here

allan

Have you read the data section of the manual I linked to before? You need to generate the JSON using your C# script.

Allan

Cololi

Now my code works on serverside and C#. It works.
But of course i still have few problem.
I'm in MVC, so in a method that return JSON.

In this fonction iRequest["iDisplayLength"] is empty. How get/set this ?

allan

No idea I'm afraid - you'd probably need to ask in a C# forum if you want help with C#.

Allan

Cololi

It's not a C# problem. My pb is that Datatable not feel iDisplayLength (and other params).

allan

"not feel"? I'm afraid I don't understand.

This is the list of parameters that DataTables 1.10 sends.

You can force a legacy mode to send the old style parameters if you require.

Allan

Cololi

"fill" not "feel" ^^ (excuse for this error)

Cololi

Thank you, it works !
I've just to work on style with page number.