前端纯js对表格进行快速排序,统计

后台框架:ssh

页面表格:(前端的样式用的是bootstrap)

这里的span是bootstrap的箭头样式,给箭头增加的点击事件

<table class="table table-striped" id="t1">
    <thead>      
        <tr>
            <th width="25%">
                学号
         <span class="glyphicon glyphicon-arrow-up" οnclick="orderByStudentId(2)"></span>
                <span class="glyphicon glyphicon-arrow-down" οnclick="orderByStudentId(1)"></span>
            </th>
            <th width="20%">姓名</th>
            <th width="20%">
                正确
         <span class="glyphicon glyphicon-arrow-up" οnclick="orderByCorrect(2)"></span>
                <span class="glyphicon glyphicon-arrow-down" οnclick="orderByCorrect(1)"></span>
            </th>
            <th width="20%">
                错误
         <span class="glyphicon glyphicon-arrow-up" οnclick="orderByError(2)"></span>
                <span class="glyphicon glyphicon-arrow-down" οnclick="orderByError(1)"></span>
            </th>
            <th width="15%">详情</th>
        </tr>
    </thead>
    <tbody class="tbody">
        <s:iterator value="recitingStudents">
        <tr>
            <td><s:property value="studentId"/></td>
            <td><s:property value="name"/></td>
            <td><s:property value="correct"/></td>
            <td><s:property value="error"/></td>
            <td><a>查看</a></td>
        </tr>
        </s:iterator>
    </tbody>
</table>

排序的js代码

为了代码的重用,可以增加传入的参数判断

快速开发,copy几个稍微改改就可以用了

//正确的排序
function orderByCorrect(num){
    var $tr = $(".tbody").find('tr');
    var array =[];
    $tr.each(function(){
        var obj ={};
        obj["index"] = $(this).index();
        obj["studentId"] = $(this).children('td').first().html();
        obj["name"] = $(this).children('td').eq(1).html();
        obj["correct"] = $(this).children('td').eq(2).html();
        obj["error"] = $(this).children('td').eq(3).html();
        obj["see"] = $(this).children('td').last().html();
        array.push(obj);
    });
    //排序
    if(num==1){
        array.sort(sortBy);
        function sortBy(a,b){
            return a.correct-b.correct;
        }
    }
    if(num==2){
        array.sort(sortBy);
        function sortBy(a,b){
            return b.correct-a.correct;
        }
    }
    //总数的计算 只用于刚开始的页面加载
   var corrects = 0;
    $.each(array,function(i){
        corrects+=parseInt(array[i].correct);
    });
    $("#correct").html(corrects);

    var errors = 0;
    $.each(array,function (i) {
        errors+=parseInt(array[i].error);
    });
    $("#error").html(errors);

    //删除旧数组生成新数组
    $('.tbody').empty().append($tr);
    for(var i =0 ;i<array.length;i++){
        $('.tbody').append($tr.eq(array[i].index));
    }
}