With lot of columns 20 sec to load

sandro33

Hi everybody,
I use Datatable with 100 to 300 rows max but with 80 columns.
On the load i have 20 seconds to wait ...
Techno : php, mysql.
How can i reduce this time ?

I have "just" 10 columns that need to be order.

Thanks for the help

Sandro

kthorngren

I would start with determining if the delay is with the server querying the information or with Datatables displaying the info. Probably start with looking at the network response time within the Developer Tools of your browser.

I don't have anything terribly slow but have one table that takes 1.5 to 2 seconds to load. Monitoring the network tab of the Developer Tools I see it takes around 250ms to retrieve the data then it takes an additional 1 to 1.5 seconds to display. I have a lot of rendering happening for that table which is the delay.

Take a look and let us know what you find. And provide more details regarding the problem area if you still need help.

Kevin

sandro33

Hi,

Thanks, i see that there was lot of time for recalcul styles. I correct this.
I understand that there is a lot of time to display the big table ( average 8.5 seconds ).
But when all is display (near 10 seconds), there is between 6 and 10 seconds to display the pagination and do something else.
I was thinking that this is the load time jquery to record all columns and rows to search and ordering ... Then the question (it's possible to remove column to this process and win time ?).

I print in a jpg the chrome performance report ....

Many Thanks

Sandro

allan

Can you link to the page showing the issue so we can profile it? That few rows really shouldn't be much of an issue.

Allan

sandro33

Ok thanks for the response Allan,

Here is the test adress and account
http://www.actiaweb.com/inventaire/main.php
datatable
net
toto55

Click on "Ordinateurs"

And you arrive in the table with near 90 columns etc ...

You will see in the "console" of your navigator the time for each row and after many seconds ....

Thanks

Sandro

sandro33

Hi,

no idea guys ?

Thanks

gyrocode

Try enabling deferRender as follows:

$('#category_table').DataTable({
   // ...skipped...
   deferRender: true
});

Also loading time can be greatly reduced if you remove all the input and select nodes and return only data in table cells td. You can generate content for the cell on the client using columns.render option instead.

For example, for "Processeurs" (4th) column:

$('#category_table').DataTable({
   // ...skipped...
   columnDefs: [
      {
         targets: 3, // 4th column, zero-based index
         render: function(data, type, row, meta){
            if(type === 'display'){
               data = '<select class="form-control" name ="Processeurm" title="Processeurm" class="selectpicker" data-max-options="3">' +
                  '<option value="1"' + (data == 1) ? ' selected' : '' + '>1 proc</option>' +
                  '<option value="2"' + (data == 2) ? ' selected' : '' + '>2 proc</option>' +
                  '<option value="4"' + (data == 4) ? ' selected' : '' + '>4 proc</option>' +
                  '</select>';
            }

            return data;
         }
      }
   ]
});

---

See more articles about jQuery DataTables on gyrocode.com.

allan

It looks like the table is DOM sourced, so the deferRender option isn't going to help in this case I'm afraid. All the DOM elements already exist, so there is no benefit in attempting to delay them being created.

The HTML is not valid on the page - which isn't going to help. And the huge number of console.log() statements won't help either - they are really slow.

Could you fix both of those and let us know then I'll try to profile it again.

Thanks,
Allan