Best way to sort page disposition on client side

Question

I'm working on a MVC project in which I display a ViewModel in several partial views within a table. I have a control in which the user can change how the table is displayed, like this:

<table>
 <tr>
  <td>
    partial view 1  partial view 2
  </td> 
 </tr>
 <tr>
  <td>
    partial view 3  partial view 4
  </td> 
 </tr>
</table>

or

<table>
 <tr>
  <td>
   partial view 1
  </td>
 </tr>
 <tr>
  <td>
   partial view 2
  </td>
 </tr>
 <tr>
  <td>
   partial view 3
  </td>
 </tr>
 <tr>
  <td>
   partial view 4
  </td>
 </tr>
</table>

Any time a user wants to change how the view is displayed, he has to click the submit button of the from, and the application has to make the request to the server, get the results, and according to a flag (TableDisposition = 1 or 2), load some divs.

I know this is not the best way to do it, but my lack of knowledge regarding client side coding (javascript/jquery) is making it impossible for me to do this in a more efficient way.

Any input will be much appreciated.

EDIT: Solved in the comments.

Answer 1

First I started loading the viewModel in two tables, each one in a div with absolute positioning. Then I made a function to hide one of those tables:

 $(function () {
        $("#divTable1").css('visibility', 'hidden');
});

Finally, I made a function which is triggered by pressing a button:

 $("#btnAlternateView").click(function () {
    if ($("#divTable2").css('visibility') == 'hidden') {
        $("#divTable2").css('visibility','visible');
        $("#divTable1").css('visibility', 'hidden');
    }
    else {
        $("#divTable2").css('visibility','hidden');
        $("#divTable1").css('visibility', 'visible');
    }
});

And that was it. Works like a charm.