vue list 按字段排序 按日期字符串排序

1 字段值是数字

data = [{
	name: 'wjw',
	age: 18
},{
	name: 'tcz',
	age: 23
},{
	name: 'qy',
	age: 22
},{
	name: 'zx',
	age: 24
}]
data= data.sort((a, b) => a.age- b.age)

2 字段值是 日期字符串 -> 转时间戳再排序

data= [{'id':1, 'submissionTime':"2022-03-02 02:02:00"},
            {'id':2, 'submissionTime':"2022-03-04 02:02:00"},
            {'id':3, 'submissionTime':"2022-03-01 02:02:00"}]

data= data.sort((a, b) => new Date(a.submissionTime).getTime() - new Date(b.submissionTime).getTime())

### Vue 中集成 PageHelper 实现分页查询时排序不生效的原因分析 在前端使用 Vue.js 进行开发时,如果遇到 `PageHelper` 工具类排序不生效的情况,通常是因为请求参数未正确传递到服务端。具体来说: - 前端发送的 HTTP 请求中缺少必要的排序字段和顺序信息。 - 后端接收参数的方式与前端发送的数据结构不符。 为了确保排序功能正常工作,建议按照以下方式调整代码逻辑[^1]。 #### 1. 修改前端代码以支持动态设置排序条件 可以在发起 AJAX 请求前构建包含排序信息的对象,并将其作为 URL 参数或 JSON 数据体的一部分提交给服务器。例如: ```javascript // 使用 axios 发送 GET 请求并携带排序参数 axios.get('/api/users', { params: { pageNum: currentPage, pageSize: sizePerPage, orderByField: 'name', orderDirection: 'asc' } }) .then(response => console.log(response.data)) .catch(error => console.error('Error:', error)); ``` 对于 POST 方法,则可以将上述对象序列化为 JSON 字符串放在 body 内部传输。 #### 2. 调整后端控制器方法签名以便接受新的排序参数 假设正在使用的框架是 Spring Boot 或其他基于 Java 的 Web 应用程序,那么应该更新相应的 RESTful API 来处理新增加的两个属性 (`orderByField`, `orderDirection`)。这可以通过修改实体类或者直接定义 DTO (Data Transfer Object) 来完成。 ```java @GetMapping("/users") public PageInfo<User> getUsers( @RequestParam(value="pageNum", defaultValue="1") Integer pageNum, @RequestParam(value="pageSize", defaultValue="10") Integer pageSize, @RequestParam(required=false) String orderByField, @RequestParam(required=false) String orderDirection){ // 构建 PageHelper 分页语句 if(orderByField != null && !"".equals(orderByField.trim())){ StringBuilder sb = new StringBuilder(); sb.append(orderByField); if("desc".equalsIgnoreCase(orderDirection)){ sb.append(" desc"); }else{ sb.append(" asc"); } PageHelper.orderBy(sb.toString()); } List<User> list = userService.selectAllUsers(); return new PageInfo<>(list); } ``` 这段代码展示了如何根据传入的排序字段名以及升降序标志来调用 MyBatis Plus 提供的静态方法 `PageHelper.orderBy()` 设置 SQL 查询中的 ORDER BY 子句[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值