1

I want to make a tabview with primefaces component with three tabs, inside tabs I will use a datatable with input text. Is it posible to use the same datatable and distinct fields in three tabs? Is it posible to paginate all tabs at the same time to show same register at a time? Sorry for my bad english.

Imagine a list of objects cars with this properties: colour, form, wheels, name, model and price.

Tabview
                      Tab1                        Tab2               Tab3
1 row      colour | form        wheels | name        model | price
2 row
3 row

I want to use same datatable and paginate three tabs at the same time to have same rows at three tabs.

Moselan
  • 25
  • 1
  • 4
  • what does _"the same datatable and distinct fields"_ mean? Your question is not clear. Do you mean the paging of the datatable on tab1 should be reflected in the datatable of tab2 and3? e.g. if you go to page 3 on tab 1 and you go to tab3 it is also on page 3? Because displaying distict fields of the same backing model is ofcourse possible since you decide what to show. – Kukeltje Aug 19 '19 at 18:02
  • "Do you mean the paging of the datatable on tab1 should be reflected in the datatable of tab2 and3? e.g. if you go to page 3 on tab 1 and you go to tab3 it is also on page 3?" Exactly. I mean all tabs have the same datatable and i am only dividing rows in the three tabs. – Moselan Aug 20 '19 at 09:23
  • deviding the columns in 3 tabs? ;-) Then start here: pdatatable https://stackoverflow.com/questions/10006778/set-page-on-pdatatable and set this 'first' variable in a property that is shared with all datatables and via ajax update the other datatables when you page in one. – Kukeltje Aug 20 '19 at 09:38

1 Answers1

0

It is possible. You can add an event to your tabView. And then change the visibility of the columns of your dataTable. The code could be something like this:

<p:tabView activeIndex="#{bean.activeTab}">
    <p:ajax event="tabChange" update="@([id$=dataTable])" />

    <p:tab title="Tab1">
    <p:tab title="Tab2">
    <p:tab title="Tab3">
</p:tabView>

<p:dataTable id="dataTable" value="#{bean.cars}">
    <p:column headerText="Colour" rendered="#{bean.activeTab == 0}">
        ...
    </p:column>

    <p:column headerText="Form" rendered="#{bean.activeTab == 0}">
        ...
    </p:column>

    <p:column headerText="Wheels" rendered="#{bean.activeTab == 1}">
        ...
    </p:column>

    <p:column headerText="Name" rendered="#{bean.activeTab == 1}">
        ...
    </p:column>

    <p:column headerText="Model" rendered="#{bean.activeTab == 2}">
        ...
    </p:column>

    <p:column headerText="Price" rendered="#{bean.activeTab == 2}">
        ...
    </p:column>
</p:dataTable>
Blarzek
  • 160
  • 12
  • For a solution like this, you'd better use the tabMenu I'd think. A tabview is useless if the datatable is outside it. But it could work. Not sure you'd want the updating all the time (you could for this case also do it purely client-side with showing/hiding columns with javascript. No need to go round-trip to the server each time. And remember that OP wants to stay on the same row when switching, so the scrolling should still be kept in memory and be applied after switching tabs. So a lot is still missing but it is a way to try – Kukeltje Aug 23 '19 at 10:35