Performance

jvcunha

Hi guys,
I use datatables with aspnet webforms (gridview) successfully.
The datatables is fantastics.
I only have problems with large amount of data. When you load a grid with more than 9000 lines, it shows the data on the page but it takes to draw the grid on average 1 minute.Has no paging, you need to show all records.
I use bDeferRender parameter: true
Anyone have any suggestions to improve the drawing performance?
thank you

allan

See the Speed FAQ.

Also, please link to the page (per the forum rules) so we can perform tests on it and see where the problem lies.

Allan

jvcunha

Hi Allan,
Being a closed company / client system, I can not provide a link in a public forum, sorry. If there is a private way where I can send better.

allan

Click my name above and then "Send message" to send a PM.

Allan

allan

Thank you for the link.

I would suggest enabling paging. At the moment you have every single row (10456 of them) being rendered (so the deferRender option you are using has no effect, since nothing can be deferred!).

Also every single one is being used for the column alignment calculation which is horribly slow at the best of times.

Paging should address both of these.

Allan

jvcunha

Allan grateful, but the client does not want paging. You can put paging at startup and when finished charging take and show all automatically?
Because it has footer with totals

allan

The only other option is to use Scroller (which looks like a full scrollable list, but uses hidden paging to speed things up).

You are currently asking the browser to draw a lot of data - I'm not surprised that it isn't very performant.

Allan

jvcunha

Allan, using Scroller he shows me the first 10 records and the vertical bar but when roll down, it only goes 10 record and does not continue ... It does not show the remaining records. And the delay was the same for mounting the grid.
I understand it's a lot of information and, in the coming months will gradually increase

allan

If it is to increase, I would suggest using server-side processing with Scroller. Example with 5 million rows - albeit fake generated on the client-side.

Allan

jvcunha

Thank you Allan, I will test and then post the result here.

jvcunha

hi Allan, took me because other priorities.
I tried one of the examples for ajax but always returns me the error: TypeError: Can not read property 'toString' of undefined

My HTML:

 <table id="teste" runat="server" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Convênio</th>
                <th>Rede</th>
                <th>Bandeira</th>
                <th>Dt. Oper.</th>
                <th>Contrato</th>
                <th>Vl.Oper.</th>
                <th>Vl. Limite</th>
                <th>Tx. Adm.</th>
                <th>Juros</th>
                <th>Juros/CFT</th>
                <th>NF Final</th>
                <th>Valor Impostos</th>
                <th>Valor Despesas</th>
                <th>Grupo Comissão</th>
                <th>Gerente</th>
                <th>Rep. 1</th>
                <th>Rep. 2</th>
                <th>Rep. 3</th>
                <th>Canal 1</th>
                <th>Comissão</th>
                <th>Canal 2</th>
                <th>Comissão</th>
                <th>% Rent.</th>
                <th>Vl. Rent.</th>
                <th>UF</th>
            </tr>            
        </thead>
    </table>

Startup:

            $ ('# <% = Teste.ClientID%>'). DataTable ({
                processing: true,
                Serverside: true,
                ajax: {
                    type: 'POST'
                    url: 'http: // localhost: 8080 / Controle.asmx / GetData'
                },
                columns: [
                    {'Date': 'covenant'},
                    {'Data', 'name'},
                    {'Date': 'nomeband'},
                    {'Date': 'dateop'},
                    {'Date': 'contID'},
                    {'Date': 'opCust'},
                    {'Date': 'limit value'},
                    {'Date': 'taxaadm'},
                    {'Data', 'interest'},
                    {'Date': 'juroscft'},
                    {'Date': 'valornf'},
                    {'Date': 'impCust'},
                    {'Date': 'despCust'},
                    {'Data', 'name'},
                    {'Date': 'representative'},
                    {'Date': 'rep1'},
                    {'Date': 'rep2'},
                    {'Date': 'REP3'},
                    {'Data', 'channel 1'},
                    {'Date': 'valorcanal1'},
                    {'Date': 'channel2'},
                    {'Date': 'valorcanal2'},
                    {'Date': 'perc_rent'},
                    {'Date': 'valor_rent'},
                    {'Date': 'uf'}
                ]
            });

jvcunha

VALID JSON returned by my web service:

{"Data": [{"covenant": "MyTeste1", "name": "Network1", "nomeband", "Flag1", "dateop": "02.27.2015","contID":"214041","opCust":"1501,00","valorlimite":"1064,76","taxaadm":"43,53","juros":"85,20","juroscft":"0,00","valornf":"307,51","impCust":"40,99108300","nome":"TAXA FATOR","representante":"MyRep1","despCust":"0,00","rep1":"0,000000","rep2":"3,900000","rep3":"1,700000","canal1":"C1","valorcanal1":"10,647600","canal2":"C2","valorcanal2":"10,647600","perc_rent":"0,00","valor_rent":"0,00","uf":"SC","grupocomissaoId":"6","loja":"Customer Test "," value "," 163,629.80 "," convenioid ":" 4 "}, {" covenant ":" MyTeste1 "," name ":" Network1 "," nomeband "," Flag1 "," dateop "" 02.27.2015","contID":"214379","opCust":"815,24","valorlimite":"698,24","taxaadm":"20,79","juros":"20,81","juroscft":"0,00","valornf":"75,40","impCust":"10,05082000","nome":"TAXA FATOR","representante":"MyRep1","despCust":"0,00","rep1":"0,000000","rep2":"3,900000","rep3":"1,700000","canal1":"C1","valorcanal1":"6,982400","canal2":"C2","valorcanal2":"6,982400","perc_rent":"0,00","valor_rent":"0,00","uf":"SC","grupocomissaoId":"6","loja":"Customer Test "," value "," 163,629.80 "," convenioid ":" 4 "}, {" covenant ":" MyTeste1 "," name ":" Network1 "," nomeband "," Flag1 "," dateop "" 03.03.2015","contID":"215292","opCust":"669,90","valorlimite":"599,81","taxaadm":"17,08","juros":"10,58","juroscft":"0,00","valornf":"42,43","impCust":"5,65591900","nome":"TAXA FATOR","representante":"MyRep1","despCust":"0,00","rep1":"0,000000","rep2":"3,900000","rep3":"1,700000","canal1":"C1","valorcanal1":"5,998100","canal2":"C2","valorcanal2":"5,998100","perc_rent":"0,00","valor_rent":"0,00","uf":"SC","grupocomissaoId":"6","loja":"Customer Test "," value "," 163,629.80 "," convenioid ":" 4 "}, {" covenant ":" MyTeste1 "," name ":" Network1 "," nomeband "," Mastercard "," dateop "" 03.03.2015","contID":"215709","opCust":"2634,51","valorlimite":"2319,61","taxaadm":"67,18","juros":"55,14","juroscft":"0,00","valornf":"192,58","impCust":"25,67091400","nome":"TAXA FATOR","representante":"MyRep1","despCust":"0,00","rep1":"0,000000","rep2":"3,900000","rep3":"1,700000","canal1":"C1","valorcanal1":"23,196100","canal2":"C2","valorcanal2":"23,196100","perc_rent":"0,00","valor_rent":"0,00","uf":"SC","grupocomissaoId":"6","loja":"Customer Test "," value "," 163,629.80 "," convenioid ":" 4 "}, {" covenant ":" MyTeste1 "," name ":" Network1 "," nomeband "," Mastercard "," dateop "" 06.03.2015","contID":"216993","opCust":"250,04","valorlimite":"220,63","taxaadm":"5,93","juros":"2,46","juroscft":"0,00","valornf":"21,02","impCust":"2,80196600","nome":"TAXA FATOR","representante":"MyRep1","despCust":"0,00","rep1":"0,000000","rep2":"3,900000","rep3":"1,700000","canal1":"C1","valorcanal1":"2,206300","canal2":"C2","valorcanal2":"2,206300","perc_rent":"0,00","valor_rent":"0,00","uf":"SC","grupocomissaoId":"6","loja":"Customer Test "," value "," 163,629.80 "," convenioid ":" 4 "}, {" covenant ":" MyTeste1 "," name ":" Network1 "," nomeband "," Flag1 "," dateop "" 09.03.2015","contID":"217497","opCust":"352,35","valorlimite":"303,71","taxaadm":"8,98","juros":"7,33","juroscft":"0,00","valornf":"32,33","impCust":"4,30958900","nome":"TAXA FATOR","representante":"MyRep1","despCust":"0,00","rep1":"0,000000","rep2":"3,900000","rep3":"1,700000","canal1":"C1","valorcanal1":"3,037100","canal2":"C2","valorcanal2":"3,037100","perc_rent":"0,00","valor_rent":"0,00","uf":"SC","grupocomissaoId":"6","loja":"Customer Test "," value "," 163,629.80 "," convenioid ":" 4 "}, {" covenant ":" MyTeste1 "," name ":" Network1 "," nomeband "," Mastercard "," dateop "" 03.12.2015","contID":"219682","opCust":"506,16","valorlimite":"431,39","taxaadm":"12,91","juros":"13,23","juroscft":"0,00","valornf":"48,63","impCust":"6,48237900","nome":"TAXA FATOR","representante":"MyRep1","despCust":"0,00","rep1":"0,000000","rep2":"3,900000","rep3":"1,700000","canal1":"C1","valorcanal1":"4,313900","canal2":"C2","valorcanal2":"4,313900","perc_rent":"0,00","valor_rent":"0,00","uf":"SC","grupocomissaoId":"6","loja":"Customer Test "," value "," 163,629.80 "," convenioid ":" 4 "}, {" covenant ":" MyTeste1 "," name ":" Network1 "," nomeband "," Flag1 "," dateop "" 03.12.2015","contID":"219727","opCust":"185,63","valorlimite":"160,74","taxaadm":"4,40","juros":"2,02","juroscft":"0,00","valornf":"18,47","impCust":"2,46205100","nome":"TAXA FATOR","representante":"MyRep1","despCust":"0,00","rep1":"0,000000","rep2":"3,900000","rep3":"1,700000","canal1":"C1","valorcanal1":"1,607400","canal2":"C2","valorcanal2":"1,607400","perc_rent":"0,00","valor_rent":"0,00","uf":"SC","grupocomissaoId":"6","loja":"Customer Test "," value "," 163,629.80 "," convenioid ":" 4 "}, {" covenant ":" MyTeste1 "," name ":" Network1 "," nomeband "," Flag1 "," dateop "" 03.12.2015","contID":"219736","opCust":"140,12","valorlimite":"116,15","taxaadm":"3,57","juros":"2,21","juroscft":"0,00","valornf":"18,19","impCust":"2,42472700","nome":"TAXA FATOR","representante":"MyRep1","despCust":"0,00","rep1":"0,000000","rep2":"3,900000","rep3":"1,700000","canal1":"C1","valorcanal1":"1,161500","canal2":"C2","valorcanal2":"1,161500","perc_rent":"0,00","valor_rent":"0,00","uf":"SC","grupocomissaoId":"6","loja":"Customer Test "," value "," 163,629.80 "," convenioid ":" 4 "}, {" covenant ":" MyTeste1 "," name ":" Network1 "," nomeband "," Mastercard "," dateop "" 03.12.2015","contID":"219884","opCust":"654,90","valorlimite":"545,64","taxaadm":"16,70","juros":"20,58","juroscft":"0,00","valornf":"71,98","impCust":"9,59493400","nome":"TAXA FATOR","representante":"MyRep1","despCust":"0,00","rep1":"0,000000","rep2":"3,900000","rep3":"1,700000","canal1":"C1","valorcanal1":"5,456400","canal2":"C2","valorcanal2":"5,456400","perc_rent":"0,00","valor_rent":"0,00","uf":"SC","grupocomissaoId":"6","loja":"Customer Test "," value "," 163,629.80 "," convenioid ":" 4 "}, {" covenant ":" MyTeste1 "," name ":" Network1 "," nomeband "," Mastercard "," dateop "" 30.03.2015","contID":"225746","opCust":"1300,34","valorlimite":"1174,09","taxaadm":"33,16","juros":"20,07","juroscft":"0,00","valornf":"73,02","impCust":"9,73356600","nome":"TAXA FATOR","representante":"MyRep1","despCust":"0,00","rep1":"0,000000","rep2":"3,900000","rep3":"1,700000","canal1":"C1","valorcanal1":"11,740900","canal2":"C2","valorcanal2":"11,740900","perc_rent":"0,00","valor_rent":"0,00","uf":"SC","grupocomissaoId":"6","loja":"Customer Test "," value "," 163,629.80 "," convenioid ":" 4 "}]}

allan

1. "Data" - should be lowercase
2. There is no Serverside - it is serverSide
3. Your data is not returning the parameters required for server-side processing if that is what you want to use.

Allan

jvcunha

Allan,
You can send a picture here?

jvcunha

my JSON result now:

{"draw":1,"recordsTotal":1,"recordsFiltered":1,"data": [{"convenio":"MyTest1","apelido":"Network1","nomeband":"Flag1","dataoperacao":"27/02/2015","contratoid":"214041","valoroperado":"1501,00","valorlimite":"1064,76","taxaadm":"43,53","juros":"85,20","juroscft":"0,00","valornf":"307,51","valorimpostos":"40,99108300","nome":"TAXA FATOR","representante":"WLLM","valordespesas":"0,00","rep1":"0,000000","rep2":"3,900000","rep3":"1,700000","canal1":"ADOT","valorcanal1":"10,647600","canal2":"CRED","valorcanal2":"10,647600","perc_rent":"0,00","valor_rent":"0,00","uf":"SC","grupocomissaoId":"6","loja":"ADAIR","valor":"163629,80","convenioid":"4"}]}

jvcunha

in chrome return:
Remote Address:[::1]:2524
Request URL:http://localhost:2524/RelApuracaoResultadosAnalitico.aspx/GetData
Request Method:POST
Status Code:200 OK

preview:
d: ""{\"draw\":1,\"recordsTotal\":1,\"recordsFiltered\":1,\"data\": [{\"convenio\":\"MyTest1\",\"apelido\":\"Network1\",\"nomeband\":\"Flag1\",\"dataoperacao\":\"27/02/2015\",\"contratoid\":\"214041\",\"v...

jvcunha

debug trace returned:

DataTables debug bookmarklet
DataTables is not available on this page.

allan

d: ""{\"draw\":1,\"recordsTotal\":1,\"

You don't want to return a d parameter (which has a string value). You want to return the inner part of that as the JSON, like in the examples and documentation on this site.

Allan

jvcunha

Allan right, but in my ajax I'm using the JSON parser and below that returns the I sent you in the previous message:

            $('#<%=teste.ClientID%>').DataTable({
                processing: true,
                serverSide: true,
                sAjaxSource: 'RelApuracaoResultadosAnalitico.aspx/GetData',
                fnServerData: function (sSource, aoData, fnCallback) {
                    $.ajax({
                        type: "POST",
                        url: sSource,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            var json = JSON.parse(data.d);
                            alert(json);
                            fnCallback(json);
                        },
                        error: function (xhr, status, err) {
                           alert(xhr.responseText);
                        }
                    });
                },
                columns: [
                    { 'data': 'convenio' },
                    { 'data': 'apelido' },
                    { 'data': 'nomeband' },
                    { 'data': 'dataoperacao' },
                    { 'data': 'contratoid', },
                    { 'data': 'valoroperado' },
                    { 'data': 'valorlimite' },
                    { 'data': 'taxaadm' },
                    { 'data': 'juros' },
                    { 'data': 'juroscft' },
                    { 'data': 'valornf' },
                    { 'data': 'valorimpostos' },
                    { 'data': 'valordespesas' },
                    { 'data': 'nome' },
                    { 'data': 'representante' },
                    { 'data': 'rep1' },
                    { 'data': 'rep2' },
                    { 'data': 'rep3' },
                    { 'data': 'canal1' },
                    { 'data': 'valorcanal1' },
                    { 'data': 'canal2' },
                    { 'data': 'valorcanal2' },
                    { 'data': 'perc_rent' },
                    { 'data': 'valor_rent' },
                    { 'data': 'uf' }
                ]
            });

allan

I think I would need a link to the page to understand what is going wrong please. That does look like it should work.

Allan

jvcunha

unfortunately I do not like free access, I'm running on my computer and I have no web server available to publish and you access.
when it may, I can send you a video recorded by jing.

jvcunha

news, to pass the json for text file works:

             $ ('# example'). DataTable ({
                 "ajax", "temp/data.txt '
             });

if step by web method does not work. mounts the datatable empty.

            $('#example').DataTable({
                processing: true,
                serverSide: true,
                sAjaxSource: 'RelApuracaoResultadosAnalitico.aspx/GetData',
                fnServerData: function (sSource, aoData, fnCallback) {
                    $.ajax({
                        type: "POST",
                        url: sSource,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            var json = JSON.parse(data.d);
                            fnCallback(json);
                        },
                        error: function (xhr, status, err) {
                           alert(xhr.responseText);
                        }
                    });
                }
            });

jvcunha

try catch on succes ajax, return:
TypeError: Cannot read property 'length' of undefined

allan

Without a link to the page there is really very little I can do to debug the problem. All I can suggest is that you console.log( json ) and make sure that it is what is required.

Allan

jvcunha

Allan,
the solution of my problem:

1. ajax call web method;
2. web method mount json, write file text in folder and return filename in (msg.d);
3. on success the ajax call (1), ajax text file to mount datatable :

                success: function (msg) {
                    $('#example').DataTable({
                        sDom: '<"H"Tfr>t<"F"i>',
                        ajax: msg.d,

Thank's for help me