Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  April 2018

  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 Posts: 19Questions: 3Answers: 0

  April 2018

  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 Posts: 19Questions: 3Answers: 0

  April 2018

  

  whene i try to use colvis extention this what i got, how can i move the colvis list to the right position ?
• foxmedo Posts: 19Questions: 3Answers: 0

  April 2018

  any help ??
• colin Posts: 15,240Questions: 1Answers: 2,599

  April 2018

  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 Posts: 63,523Questions: 1Answers: 10,473 Site admin

  April 2018 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
• foxmedo Posts: 19Questions: 3Answers: 0

  June 2018

  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 Posts: 19Questions: 3Answers: 0

  July 2018

  hello @allan this the link https://goo.gl/tjinAw
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  July 2018

  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 Posts: 56Questions: 5Answers: 4

  July 2018

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

  July 2018

  @alane yes exactely i need to list dropdown list of columns into "Colonnes" just like "Outils"
• MSLtd Posts: 56Questions: 5Answers: 4

  July 2018

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

  July 2018

  hi @MSLtd , i need to list all elements automatically and to exclude the first and the last element.
• foxmedo Posts: 19Questions: 3Answers: 0

  July 2018 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
• MSLtd Posts: 56Questions: 5Answers: 4

  July 2018

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