php中文网 | cnphp.com

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 540|回复: 0

对表中的列进行排序

[复制链接]

2614

主题

2621

帖子

9276

积分

管理员

Rank: 9Rank: 9Rank: 9

UID
1
威望
0
积分
6540
贡献
0
注册时间
2021-4-14
最后登录
2024-4-17
在线时间
665 小时
QQ
发表于 2022-3-24 15:32:11 | 显示全部楼层 |阅读模式
通过点击表格标题对表格列进行排序

[mw_shl_code=javascript,true]<table width='100%' id='tblNotifications' style='display: none;' class='TFtable'><thead id='notitblhead'>
<tr>
<th id='thDate' onclick='sortNotifications(this);' title='Click to sort by Date' style='width: 100px;'>Date</th>
<th id='thType' onclick='sortNotifications(this);' title='Click to sort by Type'>Type</th>
<th id='thDoc' onclick='sortNotifications(this);' title='Click to sort by Document Type'>Doc Type</th>
<th id='thStatus' onclick='sortNotifications(this);' title='Click to sort by Status'>Status</th>
<th id='thProcess' onclick='sortNotifications(this);' title='Click to sort by Process'>Process</th>
<th style='width: 50px;'>Edit</th>
</tr>
</thead>
<tbody id='notifications'>
</tbody>
<tfoot></tfoot>
</table>

//javascript

var notinum = 1;

function sortNotifications(ele) {
        notinum *= -1;
        var sibling = prevAll(ele);
        var n = sibling.length;
        var fldtype = (ele.id == 'thDate') ? 'd' : ''; //use this line if a column is a date field where the year part is not the start of the string
        sortTableRows(notinum,n, fldtype);
}

function prevAll(element) {
    var result = [];

    while (element = element.previousElementSibling)
        result.push(element);
    return result;
}

function sortTableRows(f,n, fld=''){
        var rows = $('#tblNotifications tbody  tr').get();

        rows.sort(function(a, b) {

                var A = getVal(a, fld);
                var B = getVal(b, fld);

                if(A < B) {
                        return -1*f;
                }
                if(A > B) {
                        return 1*f;
                }
                return 0;
        });

        function getVal(elm,fld=''){
                var v = $(elm).children('td').eq(n).text().toUpperCase();
                if(fld !=''){
                        v = getDateSortVal(v);
                }
                if($.isNumeric(v)){
                        v = parseInt(v,10);
                }
                return v;
        }
       
        function getDateSortVal(str){
                var sortdate = str.split("/");
                return sortdate[2]+'/'+sortdate[0]+'/'+sortdate[1];
        }

        $.each(rows, function(index, row) {
                $('#tblNotifications').children('tbody').append(row);
        });
}[/mw_shl_code]





上一篇:javascript 验证日期格式
下一篇:从数组中获取唯一值
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|php中文网 | cnphp.com ( 赣ICP备2021002321号-2 )51LA统计

GMT+8, 2024-4-19 08:56 , Processed in 0.193927 second(s), 36 queries , Gzip On.

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2020, Tencent Cloud.

申明:本站所有资源皆搜集自网络,相关版权归版权持有人所有,如有侵权,请电邮(fiorkn@foxmail.com)告之,本站会尽快删除。

快速回复 返回顶部 返回列表