Implementing Tabs Across Consistent Data

kraftomatic

Hi All,

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

I've been looking at the example on how to use tabs, but I'm not sure how to implement it with the data shown that I have. What I'd like to do for each stage of "points" you see in my example, have a corresponding time for each person. So the two tabs would be "points" and "times", which would flip back and forth.

The name and any other data added later would remain consistent across both tabs. I'm thinking I would need to hide one data's values at first and flip back and forth between them?

Thanks for any help.

kthorngren

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

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

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

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

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

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

I fixed it, thanks Kevin.

Ed