My data table is massive, filled with an abundance of information.
Firstly, I am looking to implement show/hide columns functionality. However, as the number of columns exceeds 10-12, the performance significantly decreases. To address this issue, I have assigned a class to each column and utilized anchor() for toggle functionality.
Secondly and thirdly, I aim to incorporate fixed headers due to the vast number rows exceeding thousands. This poses a challenge to effectively utilize my lightweight JS search function since it can't handle the immense amount of data efficiently.
Note: My table is generated from a JSON file, consisting of over 20 columns and thousands of rows. Unfortunately, I'm restricted to using only jQuery and jQueryUI frameworks.
EDIT: Added some code for show/hide feature
$('#columnSelect').on('click', 'li', function(){
var columnTmp = $(this).children('a').text()
$('#dataTable').find('.'+columnTmp).toggle()
})
I have dynamically created a list of anchor tags through my initial ajax call, where I retrieve the text of the anchor and use it to toggle the corresponding column's tds.