Colvis in custom bouton

Colvis in custom bouton

foxmedofoxmedo Posts: 19Questions: 3Answers: 0

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

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • foxmedofoxmedo Posts: 19Questions: 3Answers: 0

    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

  • foxmedofoxmedo Posts: 19Questions: 3Answers: 0

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

  • foxmedofoxmedo Posts: 19Questions: 3Answers: 0

    any help ??

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    edited April 2018

    @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

  • foxmedofoxmedo Posts: 19Questions: 3Answers: 0

    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

  • foxmedofoxmedo Posts: 19Questions: 3Answers: 0

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

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    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

  • MSLtdMSLtd Posts: 56Questions: 5Answers: 4

    @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
    }
    
  • foxmedofoxmedo Posts: 19Questions: 3Answers: 0

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

  • MSLtdMSLtd Posts: 56Questions: 5Answers: 4

    @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!

  • foxmedofoxmedo Posts: 19Questions: 3Answers: 0

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

  • foxmedofoxmedo Posts: 19Questions: 3Answers: 0
    edited July 2018

    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

  • MSLtdMSLtd Posts: 56Questions: 5Answers: 4

    @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.

This discussion has been closed.