How to sort java object on client side by multiple fields?

Question

I'm doing my first project using tomcat, jsp, servlets and log4j.

I have a Faculty entity which characterized by the id, name, budget seats and total seats:

public class Faculty {
    private int id;
    private String name;
    private byte budgetSeats;
    private byte totalSeats;
    ...
}

And user should be able to sort List<Faculty> passed to jsp page by name, total and budget seats:

<select>
  <option value="name">Faculty name</option>
  <option value="budgetSeats">Budget seats</option>
  <option value="totalSeats">Total Seats</option>
</select>
...
<table>
        <thead>
            <tr>
                <td>Faculty name</td>
                <td>Faculty budget seats</td>
                <td>Faculty total seats</td>
            </tr>
        </thead>
        <tbody></tbody>
        <c:forEach var="faculty" items="${faculties}">
            <tr>
                <td><a
                    href="<c:url value="controller?command=viewFaculty"> <c:param name="name" value="${faculty.name}"/></c:url>"><c:out
                            value="${faculty.name}"></c:out></a></td>
                <td><c:out value="${faculty.totalSeats}"></c:out></td>
                <td><c:out value="${faculty.budgetSeats}"></c:out></td>
            </tr>
        </c:forEach>
    </table>

I don't want to sort this array using Comparator every time user request sorting. How can I sort it on client-side ? If it need's a knowing javascript would you produce some code sample.

try http://jsfiddle.net/singhakash07/a2seK/135/ – singhakash Feb 05 '15 at 09:59 — singhakash, Feb 05 '15 at 09:59

score 1 · Answer 1 · answered Feb 05 '15 at 09:26

1

You can sort the table using e.g JQuery table sorter. Just add all the values to the table and sort it on client.

See the example

UPDATE:

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

and sort

$(document).ready(function() 
    { 
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
);

answered Feb 05 '15 at 09:26

StanislavL

56,971
9
68
98

do I need a table sorter jquery plugin ? I include jquery library and link the script's to it and created tablesorter.js , but it doesn't seems to work – marknorkin Feb 05 '15 at 09:56

Satyam · Accepted Answer · 2015-02-05T12:29:16.220

this can be achieved using the tablesorter jquery plugin.

Below is the html code - note that i have omitted jsp specific stuff since this is not relevant to the answer. Remember to download this plugin and place it in an accessible location

<html>
<head>
<link rel="stylesheet" href="themes/blue/style.css" type="text/css" id="" media="print, projection, screen" />
</head>
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script> 
<script type="text/javascript" id="js">

$(document).ready(function()
 {
  $("#myTable").tablesorter();
 }
);

</script>
<body>
<select id="MySorter">
  <option value="name">Faculty name</option>
  <option value="budgetSeats">Budget seats</option>
  <option value="totalSeats">Total Seats</option>
</select>

<table id="myTable" class="tablesorter">
<thead>
<tr>
 <th>Faculty name</th>
 <th>Faculty budget seats</th>
 <th>Faculty total seats</th>
 
</tr>
</thead>
<tbody>
<tr>
 <td>Smith</td>
 <td>20</td>
 <td>15</td>
 
</tr>
<tr>
 <td>Doe</td>
 <td>30</td>
 <td>10</td>
 
</tr>
<tr>
 <td>Bach</td>
 <td>10</td>
 <td>10</td>
 
</tr>
<tr>
 <td>Conway</td>
 <td>40</td>
 <td>50</td>
 
</tr>
</tbody>
</table>

</body>



<script>

$(document).ready(function() 
    { 
        $( "#MySorter" ).change(function() {
    //alert('value-'+$( "#MySorter" ).val());
    var sortColumn = $( "#MySorter" ).val();
    if(sortColumn == 'name'){
   $("#myTable").tablesorter( {sortList: [[0,0]]} );
    }else if(sortColumn == 'budgetSeats') {
   $("#myTable").tablesorter( {sortList: [[1,0]]} );
    }else if(sortColumn == 'totalSeats'){
   $("#myTable").tablesorter( {sortList: [[2,0]]} );
    }
    
  });
    } 
); 
</script>
</html>

score 0 · Answer 3 · edited May 23 '17 at 12:06

0

You could take a look of the following links to order an array using JS:

edited May 23 '17 at 12:06

Community

1
1

answered Feb 05 '15 at 09:29

kiuby_88

334
1
6
18

How to sort java object on client side by multiple fields?

3 Answers3