How to change the data in the table dynamically ?

This is my code. I want to add a sort button in the page and if i select any sort option then the data displayed in the table below should get sorted dynamically in this jsp page only.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@ page import="com.google.appengine.api.datastore.DatastoreServiceFactory" %> <%@ page import="com.google.appengine.api.datastore.DatastoreService" %> <%@ page import="com.google.appengine.api.datastore.Query" %> <%@ page import="com.google.appengine.api.datastore.Entity" %> <%@ page import="com.google.appengine.api.datastore.FetchOptions" %> <%@ page import="com.google.appengine.api.datastore.Key" %> <%@ page import="java.util.List" %>

<% DatastoreService datastore = DatastoreServiceFactory.getDatastoreService(); Query q = new Query("employee").addSort("firstname", Query.SortDirection.ASCENDING); List employees = datastore.prepare(q).asList(FetchOptions.Builder.withLimit(100)); for (Entity emp : employees) { String s1 = emp.getProperty("firstname").toString(); String s2= emp.getProperty("lastname").toString(); String s3= emp.getProperty("Email").toString(); String s4= emp.getProperty("Gender").toString(); String s5= emp.getProperty("Professionalexp").toString(); String s6= emp.getProperty("Dateofbirth").toString(); String s7= emp.getProperty("AreaofExpertise").toString(); %> <% } %>

<%= s1 %>

<%= s2 %>

<%= s3 %>

<%= s4 %>

<%= s5 %>

<%= s6 %>

<%= s7 %>