Question

我正在使用tomcat，jsp，servlets和log4j进行我的第一个项目。

我有一个学院实体，其特点是身份，姓名，预算席位和总席位数：

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

用户应该能够按名称，总预算和预算席位对{j}页面传递的List<Faculty>进行排序：

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

每次用户请求排序时，我都不想使用Comparator对此数组进行排序。我怎样才能在客户端进行排序？如果它需要知道javascript，你会产生一些代码样本。

Answer 1

您可以使用例如JQuery表分类器对表进行排序。只需将所有值添加到表中并在客户端上对其进行排序。

请参阅the example

更新：

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

并排序

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

Answer 2

这可以使用tablesorter jquery插件来实现。

下面是html代码 - 注意我省略了jsp特定的东西，因为这与答案无关。请记住下载此插件并将其放在可访问的位置

＆＃13;

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

＆＃13;

Answer 3

您可以查看以下链接，使用JS命令数组：

如何通过多个字段对客户端的java对象进行排序？

3 个答案: