Performance

jvcunha · May 2015

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 · May 2015

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 · May 2015

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 · May 2015

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

Allan

allan · June 2015

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 · June 2015

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 · June 2015

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 · June 2015

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 · June 2015

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 · June 2015

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

jvcunha · June 2015

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 · June 2015

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 · June 2015

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

Allan

jvcunha · June 2015

Allan,
You can send a picture here?

jvcunha · June 2015

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 · June 2015

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 · June 2015

debug trace returned:

DataTables debug bookmarklet
DataTables is not available on this page.

allan · June 2015

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 · June 2015

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 · June 2015

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 · June 2015

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 · June 2015

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 · June 2015

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

allan · June 2015

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 · June 2015

Allan,
the solution of my problem:

ajax call web method;
web method mount json, write file text in folder and return filename in (msg.d);
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

Performance

Performance

Replies

Howdy, Stranger!

Categories

DataTables

Performance

Performance

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables