ColVis - How to break vertical columns list into multiple columns

dspoonia7

Hi Allan,

I am using datatables and it has lots of awesome features. A big thanks to you for this amazing plugin :-)

I have implemented the colvis extension successfully but my table has around 40 columns. The problem is list of labels in colvis is too long and needs scrolling, which has been solved to an extent by using

ul.ColVis_collection {
  width: 350px;
  li {
    float: left;
 }
}

It break down the list into three columns but did't give the solution that i needed because it is still hard for user to find the required column out of 40 columns. It is too overwhelming for user and me also.

So I am looking for a solution which divides the column-labels into multiple column-lists and I am able to customise the labels as which column-label goes into which column-list. and each column has a group button at the top.

for example: I have my 40 favourite player from 4 sport. and i want to see 10 players at a time in my table. So in Colvis, I defined 4 group labels for each sport and want to arrange players name as they come below their respective sport. like all football players come under football label, all cricket players under cricket label, etc.

Again Thanks!!

allan

Hi,

Unfortunately, fully customised layouts like what you are looking for is not something that ColVis supports (nor does its replacement which will be available later this week). However, you can use the column().visible() API method to control column visibility using whatever controls you want - so you could program up a simple lightbox that has appropriate event handlers to trigger the API as needed. That is how you would get such a customised interface.

Allan

karam

see http://datatables.net/extensions/buttons/examples/column_visibility/layout.html example.

dspoonia7

Hey,

I am using aoColumns (key-value pairs) for column implementation in my Datatables, does Buttons (new colVis replacement) plugin works with key-value pairs?

e.g. when I toggle a column's visibility, does 'stateChange' function returns key or value of column or still return the index of the column like the old colVis plugin?

Thanks!!

allan

I don't understand what you mean by key value pairs for the columns array. Can you link to a test case please.

Allan

dspoonia7

Thanks for quick reply..:-)

I am not be able to provide a test case..sorry :-( but will try to explain the use case I am trying to implement here.

I have multiple pages with Datatables and I have to maintain visible / hidden columns across pages (If one changes visibility of a column on one page then it should reflect on other pages also).

As 'aoColumnDefs'
'aoColumnDefs':[{'aTargets':[0]},{'aTargets':[1,2]}]
works with column indices and It is quite difficult to keep track of order of the columns across pages using index.

So I am using 'aoColumns' (which picks data on the basis of key).
aoColumns:[{'mData':'key1'},{'mData':'key2'},{'mData':'key3'}]
which i have implemented successfully.
http://legacy.datatables.net/usage/columns

But when it comes show/hide columns,
'fnStateChange':function(iColumn,bVisible) http://legacy.datatables.net/extras/colvis/options ,It returns column index. So I still have to keep track of order of columns, which is becomes so complex where one page has some columns but some other page doesn't have.

So I am looking for a solution where 'fnStateChange' function return arguments as 'fnStateChange':function(key,bVisible) and I'll search for key in predefined Json object.

:-)

allan

ColVis is legacy software so there is no new development being done on it.

However, you might want to consider using column().dataSrc() which you can give a column index to the column() selector and it will return the column's data property (key1 for example).

Allan

dspoonia7

Great...Thanks Alan :-)