Sorting in a Javascript function and JSP

I am using pure Javascript and JSP for my Front End Purpose. On click of a search function, I have got from my database in the form of an ArrayLi开发者_开发问答st and it is displayed in a table.

This all works fine.

Now my requirement is that, the Employee Data can be sorted out in different ways like (Employee Name, Employee Age)

For this purpose I have used two Comparator classes, that is Age and Name.

There is a Button on the UI (Sort By Name), on click of that function, how can I achieve the sorting of the data?

---

There is a Button on UI (Sort By Name). Now please tell me on click of that function , how can i achive this ??

In my eyes you can achieve this in two ways:

1. The server side way (recommended), because JavaScript needs lot of CPU and memory resources. So define on the client-side a button and make an request to the server. Add to the URL a parameter so the server-side script can identify the requested action. After sorting, send the new output back to the client.

2. You can uses a JS framework, like jQuery plus jGrid (in example), but trust me it isn't efficient.

(Note: For more detailed information we will need more input from you.)

---

JSP code is executed on the server side to generate the web page to be sent back to the browser. Your Javascript code - including any onclick event handlers - is executed on the client side (by the browser), and won't be able to execute any server side (JSP) code. You can, however, request a response from the server asynchronously using AJAX, and then dynamically update the DOM of your page using the response text.

What you'll want to do is make an AJAX call to your server that retrieves the information, orders it using the required ordering (make this a parameter of the request URL), generates the HTML of the table (only the table - nothing else) using that ordered data, then sends that HTML back as the response to the AJAX call.

I can't give you much information on how to do the server side handling of the AJAX call, but I can provide you with the Javascript code (in jQuery because it makes it much easier).

<div id="mydiv">
<table>
// table contents here
</table>
</div>

function ajax() {
    url = URL that will handle the AJAX call;
    $.get(url, function (data) {
        success(data);
    });
}

function success(data) {
    $('#mydiv').html(data);
}

The table is contained within a div element because it makes it much easier to update the relevant part of the page.