Answers

• kthorngren Posts: 21,140Questions: 26Answers: 4,918

  December 2020

  Here is an example using Bootstrap tabs.

  Maybe all you need to do is toggle the visibility of different columns depending on the data you want to show. You can use Column Visibility for this. You can setup visibility groups like this example.

  Kevin
• kraftomatic Posts: 78Questions: 13Answers: 0

  December 2020

  Thanks Kevin. Just getting tabs implemented so far, can you tell what looks wrong here? Looks like the CSS isn't applying to the second tab for some reason ..

  http://live.datatables.net/yohuluco/1/edit

  Thanks.

  Ed
• kthorngren Posts: 21,140Questions: 26Answers: 4,918

  December 2020 edited December 2020 Answer ✓

  You are loading jquery.dataTables.min.js multiple times and have conflicting CSS which is cusing two sets of sorting icons:

  

  Looks like the CSS isn't applying to the second tab for some reason ..

  You have two tables with the same id of example. HTML requires unique IDs. THis example shows one way to initialize multiple tables on one page. Or you can initialize individually if the configs are different.

  Here is the updated example:
  http://live.datatables.net/lanafupa/1/edit

  You might want to change your table classes to be more Bootstrap like. See this example. Look at the HTML tab.

  EDIT: If you change your -tag tabletag classes you will need to change this selector$('table.display').DataTable({..})` to something that matches.

  Kevin
• kraftomatic Posts: 78Questions: 13Answers: 0

  December 2020

  Thanks Kevin, that helped. Easy mix on my part.

  In comparing the tabbed approach, with column visibility, I actually think colVis would be the way to go, as I could put all my data inside one table, where with the tabs, I have to use two tables, and then apply another init on the DataTable call, which feels inefficient.

  Going to play around with ColVis also here and see ..

  Thanks.
• kraftomatic Posts: 78Questions: 13Answers: 0

  December 2020

  Hi Kevin,

  I've been playing around with the buttons and have a good start:
  http://live.datatables.net/yohuluco/1/edit

  Question though - how can I set the default view of the table to be as the "Points" view is, once clicked? I feel I can turn off those columns via:

              "columnDefs": [
                  { "visible": false, "targets": 1 }
              ],
  

  But then I run into issues with the dropdown filter on the rider type, not working. It's not working correctly now, but I think there's a conflict with the ColVis and the ColumnsDef working against each other.

  Thanks,

  Ed
• kthorngren Posts: 21,140Questions: 26Answers: 4,918

  December 2020 edited December 2020

  But then I run into issues with the dropdown filter on the rider type, not working

  Datatables has no knowledge of the column search inputs so you need to update them on the fly. See if this thread helps.

  Kevin
• kraftomatic Posts: 78Questions: 13Answers: 0

  December 2020

  I fixed it, thanks Kevin.

  Ed