How to update 2 independent HTML tables on same page with one button click?


I am trying to build Web based PHP driven application with MySQL database. I need to have several tables on the same web page and dynamically reload them on button click event. Unfortunately I don’t know what approach should I take, reloading entire web page from server side using PHP or reload table from client side with JavaScript? I used to do similar task on Java and used onclick event to get data from SQL and rebuild necessary table and then display it on screen. Is it possible to achieve same approach with PHP or JavaScript? On attached picture there are two tables. I am trying to achieve the following:

1. Click “Show All” for Customers

      – show result on customer table (I know how to do it)

      – clear result on Sites table

2. versus versa when click “Show All” for Sites

3. some other operations but idea is the same – dynamically update necessary tables (several) on same page for my needs.