Colvis in custom bouton

foxmedo

Hello All,

i have many time to use colvis with cutom dropdown menu but without succss, other button are working fine for me, but i can't find a solution for colvis

the Colvis btn must be in the same portlet as others as you can see in img above

B.R

colin

Hi @foxmedo ,

I'm sorry, but I don't understand what the problem is. Would you be able to give some more information, and maybe a working example too, please?

Cheers,

Colin

foxmedo

hi @colin

As you can see in the image we have a panel before a table this panel contain buttons the :

N1 is btn wich show dropdown menu to print, Copy ...etc
N2 is btn wich must show a list of columns where user can show and hide elements
N3 is to reload (refresh) datatables
N4 is to make datatable full screen

the question is how can we show columns list in our custom btn with our custom format

foxmedo

whene i try to use colvis extention this what i got, how can i move the colvis list to the right position ?

foxmedo

any help ??

colin

Hi @foxmedo ,

I know you can do styling, take a look at this Bootstrap 4 example, but I don't know how, I'm afraid. Hopefully others can comment.

Cheers,

Colin

allan

@foxmedo - Can you link to a page showing the issue please? Specifically I would like to see how you have resolved the export buttons being in your own custom drop down (I presume it is a custom dropdown - again, without a test case it is virtually impossible to say for sure).

If it is a custom dropdown then perhaps you would be best just using the column().visible() API directly rather than attempting to use Buttons' column visibility if you don't actually want to use Buttons!

Allan

foxmedo

sorry for the delay

allan there is no issue, i can't find solution to put the colvis in custom dropdown

the idea is how can i chose the position or where to show the colvis ?

B.R

foxmedo

hello @allan this the link https://goo.gl/tjinAw

allan

I'm not really understanding I'm afraid. You have a dropdown called "Column visibility" which shows the dropdown list of columns. Do you want that list somewhere else? Where?

Allan

MSLtd

@foxmedo - if you declare your table with a global scope before you initialise it, you can access the table elsewhere in your .js scripts:

var table;

$(document).ready(function(){
    table = $ ('#my_table_id').DataTable(/*your table data definitions here*/)
}

Once you've done this, inside your drop-down menu you could have for example a div:

<div id="customButton" name="customButton" onclick="runColvis();">Column Visibility</div>

(If security is a concern for the application you're developing, I'd recommend looking into event handlers)

When the user clicks on the div it should access the API through the 'table' variable, thus applying these changes to the table:

function runColvis(){
    table.column().visible()... //your colvis API code here
}

foxmedo

@alane yes exactely i need to list dropdown list of columns into "Colonnes" just like "Outils"

MSLtd

@foxmedo - Having looked at your example above and had a look into what exactly it is that colvis does I understand better what you are hoping to achieve.

You will need to build the drop-down menu yourself (I'm going to display the long way around - you can do this programmatically with a for-loop and an array for menus with lots of elements). your dropdown should look something like this:

<div id="myDropdown" class="dropdown-content">
    <a title="/th title/" href="#" onclick="setColVisible(0 /*column index*/);return false;">/th title/</a>
    <a title="/th title/" href="#" onclick="setColVisible(1 /*column index*/);return false;">/th title/</a>
    <a title="/th title/" href="#" onclick="setColVisible(2 /*column index*/);return false;">/th title/</a>
</div>

What's happening here, is when you click on the element in the drop-down menu it passes the associated column index to a generic function setColVisible() that you will add to the javascript library that you initiate the table in, remembering to declare the table variable with a global scope as in my example above. this generic function will utilise the column().visible() API to set the visibility of said column. The function is as follows:

function setColVisible(columnIndex){
    table.column( columnIndex ).visible( !table.column( columnIndex ).visible );
}

Hope this helps!

foxmedo

hi @MSLtd , i need to list all elements automatically and to exclude the first and the last element.

foxmedo

hi @MSLtd

this working very well for me

function setColVisible(columnIndex){
    table.DataTable().column( columnIndex ).visible( !table.DataTable().column( columnIndex ).visible() );
}

what i need now is to list all elements in the dropdown automatically, excluding the first and the last element

MSLtd

@foxmedo I assume by elements you are referring to the table headers? (e.g. 'nom' or 'date d'ajout') - moving these to your custom button automatically would be rather difficult as you'd probably have to play around with the DataTables base scripts.

I do however have a theory, you could perhaps try taking the class assigned to the colvis button, and paste this onto your own button... this may cause it to create the elements to be created on both buttons, and then it would be a case of hiding the original button.