The best way to sort the page on the client side

Question

I am working on an MVC project in which I show the ViewModel in several partial views in a table. I have a control in which the user can change the way the table is displayed, for example:

<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> 

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

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

Any input is appreciated.

EDIT: Solved in the comments.

Answer 1

First, I started loading viewModel into two tables, each of which was in a div with absolute positioning. Then I created a function to hide one of these tables:

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

Finally, I made a function that is launched 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’s all. It works like a charm.