Improving performance with many columns
Improving performance with many columns
tomixx1199
Posts: 5Questions: 1Answers: 0
I couldn't find anything relating to my problem, as most usually have a problem with having too many rows.
However for me and my co-programmer we are running into performance issues when using the buttons colVis extension.
we have a table that has about 120 columns, once loaded the data displays fine, but when we need to hide or show a large amount of columns, the webpage hangs for 10-15 seconds. It isn't a problem when we show or hide one or two extra columns at a time but doing it for a large quantity seems to freeze it up.
Here is the script for our datatable
$(document).ready(function () {
$('#scrape').dataTable(
{
"pageLength": 10,
fixedHeader: {
header: true,
footer: true,
headerOffset: 50
},
"dom": '<"dt-buttons"Bfli>rtp<"initial"i> ',
"autoWidth": true,
"buttons": [
'colvis',
'copyHtml5',
'csvHtml5',
'excelHtml5',
'print',
{
extend: 'colvisGroup',
text: 'Hide all',
hide: ':visible'
},
{
extend: 'colvisGroup',
text: 'Show all',
show: ':hidden'
},
{
extend: 'collection',
text: 'Categories',
buttons: [
{
extend: 'colvisGroup',
text: 'Transaction Information',
show: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
hide: [11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32,
33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55,
56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78,
79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100,
101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 114, 115, 116, 117, 118, 119, 120, 121, 122
]
},
{
extend: 'colvisGroup',
text: 'Competition Information',
show: [1, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26],
hide: [0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 27, 28, 29, 30, 31, 32,
33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55,
56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78,
79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100,
101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 114, 115, 116, 117, 118, 119, 120, 121, 122
]
},
{
extend: 'colvisGroup',
text: 'Preference Programs',
show: [27, 28, 29],
hide: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 30, 31, 32,
33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55,
56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78,
79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100,
101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 114, 115, 116, 117, 118, 119, 120, 121, 122
]
},
{
extend: 'colvisGroup',
text: 'Product Or Service Information',
show: [30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47],
hide: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27,
28, 29, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72,
73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98,
99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 114, 115, 116, 117, 118, 119, 120, 121, 122
]
},
{
extend: 'colvisGroup',
text: 'Dates',
show: [48, 49, 50, 51],
hide: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32,
33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 52, 53, 54, 55,
56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78,
79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100,
101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 114, 115, 116, 117, 118, 119, 120, 121, 122
]
},
{
extend: 'colvisGroup',
text: 'Amounts',
show: [52, 53, 54, 55],
hide: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32,
33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 56,
57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78,
79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100,
101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 114, 115, 116, 117, 118, 119, 120, 121, 122
]
},
{
extend: 'colvisGroup',
text: 'Purchaser Information',
show: [56, 57, 58, 59, 60, 61, 62, 63, 64, 65],
hide: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25,
26, 27, 28, 29, 30, 31, 32,
33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55,
, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78,
79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100,
101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 114, 115, 116, 117, 118, 119, 120, 121, 122
]
},
]
}
]
});
$('body').delegate('#scrape tbody tr', "click", function () {
if ($(this).hasClass('selected')) $(this).removeClass('selected');
else {
$(this).siblings('.selected').removeClass('selected');
$(this).addClass('selected');
}
});
$('.myBtn').hideme('#scrape tbody tr', "click", function () {
$('.hideMe.').hide();
});
});
We have tested it with only a few rows in the table and it still performs poorly.
Are there any ways to improve the performance of the hide and show columns?
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Hi @tomixx1199 ,
That's is a very wide table, so you may be seeing unexpected issues. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Here is the example
most of it runs the same as our actual code, however since our mvc project uses razor I had to modify some of the code to make the html simpler. This does improve performance a little but but you can still see a major slowdown when using the "Hide All" and "Show All" buttons.
The "categories" buttons work well in the example but they also lag on our actual project.
hi @tomixx1199 ,
Thanks for the demo. There were a few console errors which I tidied up (jQuery not included first, column indexes beyond 119, etc.) - see here - but yep, I'm seeing the speed there. We'll have a think and get back to you,
Cheers,
Colin
You are using really old versions of DataTables and Buttons. Updating them to the latest versions should make a good difference.
Allan
I updated them but haven't seen any considerable difference.
Thanks for checking the update - Colin created one as well: http://live.datatables.net/lihaloza/6/edit . I agree, there appears to be little difference there.
Disabling
FixedHeaderhelps, doing a hide all first, then show all takes about a second for me. So I suspect FixedHeader might be able to be optimised (perhaps grouping the column resize calculations). But I'm not seeing any where in a performance trace that the example without FixedHeader can be improved - its taking a finite amount of time to add the cells back into the document, and DataTables is more optimised for rows than columns. Unless you can see anything?Allan
Sorry I was off-site for a while and couldn't check back in on this. I tried removing many other features we use and just like you said, the amount of time it takes seems to be roughly the same. Is this simply something that might be addressed in a future update or is there still a possibility that I can somehow improve the performance of showing/hiding large groups of columns?
Hi @tomixx1199 ,
It's possible it could be addressed in an update - however, Allan took a quick check (see above) and there's nothing obvious there, and this wouldn't be a development priority unless others also are stumbling over this. I've raised it internally (DD-913 for my reference) and we'll report back here when there's an update.
Cheers,
Colin
Thanks for the quick response I'll keep checking back.