Performance issues on a small dataset 2.3k lines. it takes 3 minutes to render the databale
Performance issues on a small dataset 2.3k lines. it takes 3 minutes to render the databale
devtech
Posts: 6Questions: 0Answers: 0
logsDatatable = $('.logsdatatable').DataTable({
// dom: '<"d-flex justify-content-between align-items"<"btn-group"B>lf>rtip'
dom: '<"top overflow-hidden mb-50 row"<"col-md-12"B>><"row"<"col-md-3"l><"col-md-6"i><"col-md-3"f>><"row"<"col-md-12"rt>><"row"<"col-md-12"p>><"clear">'
//dom: '<"top justify-content-between align-items overflow-hidden mb-50"<"btn-group"B><lf>rt><"bottom mt-1"ip><"clear">'
// ,scrollX : true
// ,AutoWidth: false
// ,bAutoWidth: false
// ,language:{decimal:",",thousands:"."}
,colReorder: { realtime: false }
,processing: true
,bDeferRender: true
,bStateSave: true
, fixedHeader: {
header: true,
headerOffset: $('.header-navbar').outerHeight()
},
"language": {
"url": `//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/${language}.json`,
searchPlaceholder: translations[localeShort].search
}
, responsive: {
details: true,
columnDefs: [{
className: 'dtr-control',
orderable: false,
targets: 0
}],
}
, "bAutoWidth": false
, columnDefs: [{
visible: false,
targets: [1, 12, 13, 14]
}]
, order: [[1, "desc"]] //can't use column name to order
, "pagingType": "full_numbers"
, buttons: [
{
extend: 'copy',
className: 'btn-outline-info',
exportOptions: {
columns: [1, 2, 3, 4, 5, 6, 7, 9, 12, 13] //can't use column name to copy
}
},
{
extend: 'csv',
className: 'btn-outline-info',
charset: 'UTF-8',
fieldSeparator: ',',
bom: true,
filename: 'Inquizyt Socle '+ translations[localeShort].logs_table + text,
title: 'Inquizyt Socle '+ translations[localeShort].logs_table + text,
exportOptions: {
columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 12,13]
}
},
{
extend: 'excel',
className: 'btn-outline-info',
autoPrint: false,
filename: 'Inquizyt Socle '+ translations[localeShort].logs_table + text,
title: 'Inquizyt Socle '+ translations[localeShort].logs_table + text,
exportOptions: {
columns: [1, 2, 3, 4, 5, 6, 7, 9, 12, 13]
}
},
{
extend: 'pdf',
className: 'btn-outline-info',
filename: 'Inquizyt Socle '+ translations[localeShort].logs_table + text,
title: 'Inquizyt Socle '+ translations[localeShort].logs_table + text,
autoPrint: false,
orientation: 'landscape'
, exportOptions: {
columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 12,13]
}
},
{
extend: 'print',
className: 'btn-outline-info',
orientation: 'landscape',
exportOptions: {
columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 12,13]
}
}
]
});
<tr>
<th></th>
<th><%= t('message.log_id')%></th>
<th><%= t('message.source')%></th>
<th><%= t('message.category')%></th>
<th data-priority="3"><%= t('message.intent')%></th>
<th data-priority="1"><%= t('message.question')%></th>
<th><%= t('message.response')%></th>
<th><%= t('message.envoyee_par')%></th>
<th><%= t('message.confidence_model')%></th>
<th><%= t('message.sentiment_score')%></th>
<th><%= t('message.date')%></th>
<th data-priority="2"><%= t('message.actions')%></th>
<th><%= t('message.answered_at')%></th>
<th><%= t('message.updated_at')%></th>
<th><%= t('message.confidence_threshold')%></th>
</tr>
Replies
See this FAQ for speed improvement options.
I don't see the
ajaxoption configured. That suggests you are building an HTML table before initializing Datatables. Maybe you can change to use ajax loaded data or server side processing to increase performance.Kevin
but is it normal to take so much time? I know that i have the option of serverside. but i want to benefit from the quick search on client side and not have to have server calls at every search and render data
that's how i am building the datatable
<% @messages.each do |message|%>
<tr class="todo-item">
<td></td>
<td>
<%= message.id %>
</td>
<td>
<span data-toggle="tooltip" data-placement="top" title="<%= message.source %>"
class="badge badge-<%= message.source %> badge-pill">
<%= message.source %>
</span>
</td>
any of these options that i can remove to increase performance?
// dom: '<"d-flex justify-content-between align-items"<"btn-group"B>lf>rtip'
dom: '<"top overflow-hidden mb-50 row"<"col-md-12"B>><"row"<"col-md-3"l><"col-md-6"i><"col-md-3"f>><"row"<"col-md-12"rt>><"row"<"col-md-12"p>><"clear">'
//dom: '<"top justify-content-between align-items overflow-hidden mb-50"<"btn-group"B><lf>rt><"bottom mt-1"ip><"clear">'
// ,scrollX : true
// ,AutoWidth: false
// ,bAutoWidth: false
// ,language:{decimal:",",thousands:"."}
,colReorder: { realtime: false }
,processing: true
,bDeferRender: true
,bStateSave: true
, fixedHeader: {
header: true,
headerOffset: $('.header-navbar').outerHeight()
},
"language": {
"url":
//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/${language}.json,searchPlaceholder: translations[localeShort].search
}
, responsive: {
details: true,
columnDefs: [{
className: 'dtr-control',
orderable: false,
targets: 0
}],
}
, "bAutoWidth": false
, columnDefs: [{
visible: false,
targets: [1, 12, 13, 14]
}]
, order: [[1, "desc"]] //can't use column name to order
, "pagingType": "full_numbers"
The problem is that first the HTML table needs to be built with the loop you have. Then Datatables processes each row to build its data cache for sorting and searching, etc.
The FAQ I linked to indicates the
orderClassesoption might have an affect on performance. Try disabling theorderClassesoption.Kevin
I tried, it did not change anything...
It might be worth trying to determine if the delay is with Datatables. Try loading the page without Datatatbles. How long does it take compared to with Datatables.
The only other options would be to use
ajaxloaded data with possibly enabling server side processing if the just using `-option ajax is too slow.Kevin
If you link to the page I can profile it to see where the issue lies.
Allan
I will check how to load the page without datatables. good tip.
Just comment the initialisation of the DataTable out and then reload the page to see what the performance is like.
Or leave it enabled and check the browser's network and performance inspectors. That will give a good indication of what is going on. I can do that for you if you give me a link to the page.
Allan