查询所有数据希望在前端显示的数据从1开始递增,应该怎么处理
在首列前多显示一列序号,从1开始
加一个status 获取列表的index 加到每行开头 status.index+1
1、字符过滤器
web.xml中写法如下
<filter>
<filter-name>CharacterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CharacterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
2、文件上传的过滤器
web.xml中写法如下
<filter>
<filter-name>MultipartFilter</filter-name>
<filter-class>org.springframework.web.multipart.support.MultipartFilter</filter-class>
<init-param>
<param-name>multipartResolverBeanName</param-name>
<param-value>multipartResolver</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>MultipartFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
3、扩展form所支持的http方法的过滤器
web.xml中写法如下
<filter>
<filter-name>hiddenHttpMethodFilter</filter-name>
<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>hiddenHttpMethodFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
浏览器form表单只支持GET与POST请求,而DELETE、PUT等method并不支持,spring3.0添加了一个过滤器,可以将这些请求转换为标准的http方法,使得支持GET、POST、PUT与DELETE请求,该过滤器为HiddenHttpMethodFilter。
需要注意的是,由于doFilterInternal方法只对method为post的表单进行过滤,所以在页面中必须如下设置:
<form action="..." method="post">
<input type="hidden" name="_method" value="put" />
......
</form>
而不是使用:
<form action="..." method="put">
......
</form>
HiddenHttpMethodFilter的实现原理其实就是新建了个HttpMethodRequestWrapper类,覆写了getMethod()方法,也就是将原来本身的HTTP请求方式(POST)给隐藏掉了。
可以在前端页面中添加一个序号列来实现每一行都对应一个递增的序号。具体实现方法如下:
<table>
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>数量</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>苹果</td>
<td>10</td>
<td>3.5</td>
</tr>
<tr>
<td>2</td>
<td>橙子</td>
<td>20</td>
<td>2.8</td>
</tr>
<tr>
<td>3</td>
<td>香蕉</td>
<td>15</td>
<td>4.0</td>
</tr>
</tbody>
</table>
<body>
<table>
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>数量</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td id="num"></td>
<td>苹果</td>
<td>10</td>
<td>3.5</td>
</tr>
<tr>
<td id="num"></td>
<td>橙子</td>
<td>20</td>
<td>2.8</td>
</tr>
<tr>
<td id="num"></td>
<td>香蕉</td>
<td>15</td>
<td>4.0</td>
</tr>
</tbody>
</table>
<script>
var tds = document.getElementById("num");
for (var i = 0; i < tds.length; i++) {
tds[i].innerHTML = i + 1;
}
</script>
</body>
<table>
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>数量</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr th:each="item, index : ${items}">
<td th:text="${index.index + 1}"></td>
<td th:text="${item.name}"></td>
<td th:text="${item.num}"></td>
<td th:text="${item.price}"></td>
</tr>
</tbody>
</table>
其中,items对应的是后端传递到前端的数据,使用Thymeleaf的th:each属性来循环遍历items,使用Thymeleaf的表达式来动态生成序号。