for example, the table is sorted according to the date order before paging, and the date is sorted disorderly after paging, as shown in the following figure
this is the first page
obviously, the date order is out of order, but it is sorted on the current page, not the whole sort.
my code is as follows
<template>
<div>
...
<div>
<el-table
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
border
style="width: 100%"
:default-sort = "{prop: "date", order: "descending"}">
<el-table-column
prop="date"
label="Modified Date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Experiment Name"
width="180">
</el-table-column>
<el-table-column
prop="content"
label="Content"
width="640">
</el-table-column>
</el-table>
<br><br>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>
</div>
</div>
...
</template>
<script>
...
export default{
data() {
return {
tableData:[{
date: "",
name: "",
content: ""
}],
currentPage: 1,
pagesize:10
}
},
mounted: function(){
this.getAbHistory();
},
methods:{
handleSizeChange(size) {
this.pagesize = size;
},
handleCurrentChange(currentPage) {
this.currentPage = currentPage;
},
getAbHistory(){
axios.get("/historyScan/AbHistory").then(result =>{
var res = result.data;
if(res.status == "0"){
let values = res.result.hbaseRst;
var data = []
for (let i = 0; i < values.length; iPP){
var obj = {}
obj.name= values[i].key;
obj.date = moment(values[i].timestamp).format("YYYY-MM-DD HH:mm:ss");
obj.content = values[i].$;
data[i] = obj
}
this.tableData = data;;
}
else{
this.$message.error("A/B test ");
}
});
}
}
}
</script>
Please give me some advice on how to sort the whole data and how to modify the front-end code. Thank you