首页 > 代码库 > js前端排序

js前端排序

javascript 做前端排序

<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>前端排序</title><script src="http://www.mamicode.com/js/jquery-1.6.2.min.js"></script></head><body><script type="text/javascript">    //转换器,将列的字段类型转换为可以排序的类型:String,int,float    function convert(sValue, sDataType) {        switch(sDataType) {            case "int":                return parseInt(sValue);            case "float":                return parseFloat(sValue);            case "date":                return new Date(Date.parse(sValue));            default:                return sValue.toString();        }    }    //排序函数产生器,iCol表示列索引,sDataType表示该列的数据类型    function generateCompareTRs(iCol, sDataType) {        return  function compareTRs(oTR1, oTR2) {                    var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);                    var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);                                        if (vValue1 < vValue2) {                        return -1;                    } else if (vValue1 > vValue2) {                        return 1;                    } else {                        return 0;                    }                };    }    //排序方法    function sortTable(sTableID, iCol, sDataType) {        var oTable = document.getElementById(sTableID);        var oTBody = oTable.tBodies[0];        var colDataRows = oTBody.rows;        var aTRs = new Array;        //将所有列放入数组        for (var i=0; i < colDataRows.length; i++) {            aTRs[i] = colDataRows[i];        }        //判断最后一次排序的列是否与现在要进行排序的列相同,是的话,直接使用reverse()逆序        if (oTable.sortCol == iCol) {            aTRs.reverse();        } else {            //使用数组的sort方法,传进排序函数            aTRs.sort(generateCompareTRs(iCol, sDataType));        }        var oFragment = document.createDocumentFragment();        for (var i=0; i < aTRs.length; i++) {            oFragment.appendChild(aTRs[i]);        }        oTBody.appendChild(oFragment);        //记录最后一次排序的列索引        oTable.sortCol = iCol;    }</script><p>Click on the table header to sort in ascending order.</p><table border="1" id="tblSort">    <thead>        <tr>            <th onclick="sortTable(‘tblSort‘, 0)"                style="cursor:pointer">Last Name</th>            <th onclick="sortTable(‘tblSort‘, 1)"                style="cursor:pointer">First Name</th>            <th onclick="sortTable(‘tblSort‘, 2, ‘date‘)"                style="cursor:pointer">Birthday</th>            <th onclick="sortTable(‘tblSort‘, 3, ‘int‘)"                style="cursor:pointer">Siblings</th>        </tr>    </thead>    <tbody>        <tr>            <td>Smith</td>            <td>John</td>            <td>7/12/1978</td>            <td>2</td>        </tr>        <tr>            <td>Johnson</td>            <td>Betty</td>            <td>10/15/1977</td>            <td>4</td>        </tr>        <tr>            <td>Henderson</td>            <td>Nathan</td>            <td>2/25/1949</td>            <td>1</td>        </tr>        <tr>            <td>Williams</td>            <td>James</td>            <td>7/8/1980</td>            <td>4</td>        </tr>        <tr>            <td>Gilliam</td>            <td>Michael</td>            <td>7/22/1949</td>            <td>1</td>        </tr>        <tr>            <td>Walker</td>            <td>Matthew</td>            <td>1/14/2000</td>            <td>3</td>        </tr>    </tbody></table></body></html>

效果 点击上面的标题可按照相应的条件排序:

相关文章http://henryzp.com/?p=599

js前端排序