更改表格布局的最佳方法-PHP还是Javascript？

Question

Hello my fellow dev comrades!

I am a C/C++ dev making my first entry into web development. I'm making a soccer tournament scorecard. PHP does the back-end processing to generate the scores. Javascript/CSS take care of the presentation. The screens keep transitioning like this(oops- cant attach a pic as I dont have enough reps!)

Edit: The rendering is messed up. This is actually a 4x1 table, then a 2x1 table, then a 1x1 table.

__________________
| Brazil 1       |
| Germany 2      |
__________________
__________________
| Italy 3        |
| Argentina 2    |
__________________
__________________
| England 1      |
| Holland 2      |
__________________
__________________
| USA 0          |
| France  2      |
__________________

USER CLICKS NEXT BUTTON

_________________
| Italy  0       |
| Germany 2      |
__________________

__________________
| France 1       |
| Holland 3      |
__________________

NEXT BUTTON IS CLICKED

__________________
| GERMANY 2      |
| HOLLAND 1      |
__________________

So at first, you have the screen display results of 4 matches. Once you click the NEXT button, it displays the semifinal results. And then the final match.

So as you see, the layout(number of rows) of the Scoreboard Table changes. How do I handle re-drawing the layout : I am thinking of having my PHP script churn out the entire tournament results and write them to a hidden/invisible element, and then have Javascript process this element and decide the layout based on what stage of the tournament we are at.

Is this a sound approach? Do we have a better way of doing this? My approach was based on that fact that it takes only one call to the server to extract results to minimize the loading time.

Thanks and cheers!

Answer 1

Personally I would load each table into a tab using something like jQuery UI Tabs http://jqueryui.com/tabs/

You could use other plug ins too but I tend to start with jQuery UI in most scenarios.

Answer 2

A good way to do this is through Pagination. There are a number tutorials around (eg PHP pagination ) that will help you grab it. The approach you are taking is not scalable as once you have lot of data, pulling all of them in one go will slow the interface down and will not be optimised. In fact in majority of cases, user will not anyways browse through all the scores.

The basic idea behind around pagination is that you fetch only a fixed number of results only for that page. So you will need parameters like page number, results per page, total results to limit the results you want to fetch from DB and show the pagination links. You can customise how the links work.

Another way is to use Dynamic tables as well that can make your table dynamic in browsing and searching (will give you pagination by default) but that will only be client side implementation and the whole data will still be fetched from backend, which ideally is not scalable as I said. If you are sure that the data/table will not extend beyond a limit you can use this. It makes the UI quite good in browsing and searching.

Updating after your comment where you explained about the tournament. In this scenario, you can fetch all the data in one go. Then use jQuery to display the data dynamically. Check this link Fifa World Cup 2014 . You can get some idea how you want to make your interface. Fifa World Cup's Match browser has a good UI to browse matches.

You can use classes and IDs with jQuery to show and hide (and even scroll) to matches.