Hi,
My mysql table have more than 30 columns.
If i were to display all data on a single webpage, then my webpage width will be wider than my monitor! I do not want it this way.
I would like to do one time retrieval of all mysql data in a table but display partial data. I can further choose to see remaining data by clicking the other "TAB".
eg.
When the page load, i can see data for column 1, column 2 & column 3 on TAB A.
When i click on TAB B, i can see data for column 4, column 5, column 6 & 7.
When i click on TAB C, i can see data for column 7 & column 8.
When i click on TAB D, i can see data for column 9, column 10, column 11 & column 12.
........
........
Pls note that the webpage does not reload when i click on each TAB.

Your guidance is greatly appreciated, thanks.

    You would need to use some JavaScript. You might want to make use of PHP's [man]json_encode/man function to populate the data in your JavaScript function(s) as a JSON object.

      An other option would be to already populate all tabs using different query's.
      All tabbuttons would be on top of a div.
      The div below actually consists of the same amount of tabs you got and they're all positioned directly below each other.
      Than you'd write a simple js function that sets the wanted tab to visible and the rest to hidden.

      I'm not sure if you'd need to use the 'visibility' element or the 'display' element to change the appearance of the divs. One of them only hides the divs so that they're all below each other. You'd end up with a page witht the tabs on top and below some empty space and than your div.
      With the other element the hidden divs won't take any space so that the visible div is always on top.
      I believe the good one is the display element with either: 'block' or 'none'.

        5 days later

        many thanks for your guidance.
        I'm not familiar with "json_encode()".
        I do not know how to use it in my project.

        Below is the TAB style i used. It uses javascript to toggle "on/off".

        <div class="tab_mo">
   <div id="tab_mo_1">tab1content</div>
   <div id="tab_mo_2" style="display:none">tab2content</div>
   <div id="tab_mo_3" style="display:none">tab3content</div>
   <div id="tab_mo_4" style="display:none"><a href="/">tab4content</a></div>
  </div>

        I'm using jquery to perform table filter, sort, search & paginate.

        My problem now is I'm not able to filter, sort, search, paginate across all the TAB at the same time.

        I've tried inserting a table within each tab but failed.
        eg. When i sort column 1 data in TAB A, the column data in TAB B, TAB C, TAB D ideally should be sorted as well. But it did not turn out this way.

        Any suggestions, thanks?

          Write a Reply...