table的排序



<script type="text/javascript">

//转换类型,v为值,dataType为类型
function convert(v,dataType){
switch(dataType){
case "int":
return parseInt(v);
case "float":
return parseFloat(v);
case "date":
return (new Date(Date.parse(v)));
default:
return v.toString();
}
}
//排序函数,index为列号,dataType为数据类型
function myCompare(index,dataType){
if(dataType=="String"){
return function compare(a,b){
var str1=convert(a.cells[index].innerHTML,dataType);
var str2=convert(b.cells[index].innerHTML,dataType);
return str1.localeCompare(str2);
};
}else{
return function compare(a,b){
var str1=convert(a.cells[index].innerHTML,dataType);
var str2=convert(b.cells[index].innerHTML,dataType);
if(str1>str2){
return 1;
}else if(str1<str2){
return -1;
}else{
return 0;
}
};
}
}
//全局变量记录当前排序index;
var currentCol=-1;
//排序
function sortTable(tableID,index,dataType){
var _tab=$("#"+tableID);
var _tbody=_tab.find("tbody")[0];//获取tbody
var _newRows=_tbody.rows;//获取tbody中所有行
var arr=new Array();//用户存放tbody所有行
//通过循环将所有行放进数组
for(var i=0;i<_newRows.length;i++){
arr.push(_newRows[i]);
}
//判断最后一次排序的列是否与现在要进行排序的列相同,如果是就反序排列
if(currentCol==index){
arr.reverse();
}else{
arr.sort(myCompare(index,dataType));
}
//创建文档碎片
var oFragment=document.createDocumentFragment();
for(var i=0;i<arr.length;i++){
if(i%2==0){
arr[i].style.background="#00FFFF";
oFragment.appendChild(arr[i]);
}else{
arr[i].style.background="#00FF00";
oFragment.appendChild(arr[i]);
}
}
_tbody.appendChild(oFragment);
currentCol=index;
}

//此处是调用,需要更加完善...
$(function(){
var tableID="sorttable";
$("#sorttable").find("thead").find("tr").find("td").each(function(index,o){
if(index==1){
o.click(sortTable(tableID,index,"String"));
}else{
o.click(sortTable(tableID,index,"float"));
}
});
});

</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Table 可以使用 sort-by 属性来进行排序。sort-by 属性可以指定一个字段或一个方法来进行排序,同时可以使用 sort-desc 属性来指定排序的方向。 以下是一个 Vue Table 排序的例子: ```html <template> <div> <table> <thead> <tr> <th @click="sortBy('name')">Name</th> <th @click="sortBy('age')">Age</th> <th @click="sortBy('email')">Email</th> </tr> </thead> <tbody> <tr v-for="user in sortedUsers" :key="user.id"> <td>{{ user.name }}</td> <td>{{ user.age }}</td> <td>{{ user.email }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { users: [ { id: 1, name: 'John', age: 25, email: 'john@example.com' }, { id: 2, name: 'Jane', age: 30, email: 'jane@example.com' }, { id: 3, name: 'Bob', age: 20, email: 'bob@example.com' }, { id: 4, name: 'Alice', age: 35, email: 'alice@example.com' }, ], sortByField: 'name', sortDesc: false, }; }, computed: { sortedUsers() { const field = this.sortByField; const desc = this.sortDesc ? -1 : 1; return this.users.sort((a, b) => { if (a[field] < b[field]) return -1 * desc; if (a[field] > b[field]) return 1 * desc; return 0; }); }, }, methods: { sortBy(field) { if (field === this.sortByField) { this.sortDesc = !this.sortDesc; } else { this.sortByField = field; this.sortDesc = false; } }, }, }; </script> ``` 在上面的例子中,我们定义了一个 users 数组来存储用户信息。Vue Table 使用 v-for 指令来循环渲染用户信息,并使用 @click 事件来触发 sortBy 方法进行排序。sortBy 方法根据点击的字段来进行排序,并更新 sortByField 和 sortDesc 属性。sortedUsers 计算属性根据 sortByField 和 sortDesc 属性来返回排序后的用户信息。 注意,在实际开发中,我们可能需要使用分页、搜索等功能,这时需要引入第三方库或自己编写相关功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值