jQuery實現表格按列字母或數字排序

　　最近做的一個項目中需要自己寫個表格排序的功能，於是就上網收集了一下，主要原理就是jQuery操作表格

　　jQuery代碼如下：

$(function () {
        $('#tblGrid').each(function () {
            var $table = $(this);                       //將table存儲為一個jquery對象

            $('thead td', $table).each(function (column) {
                var findSortKey;
                if ($(this).is('.sort-alpha')) {       //按字母排序
                    findSortKey = function ($cell) {
                        return $cell.find('sort-key').text().toUpperCase() + '' + $cell.text().toUpperCase();
                    };
                } else if ($(this).is('.sort-numeric')) {       //按數字排序
                    findSortKey = function ($cell) {
                        var key = parseFloat($cell.text().replace(/^[^\d.]*/, ''));
                        return isNaN(key) ? 0 : key;
                    };
                }

                if (findSortKey) {
                    $(this).addClass('clickable').hover(function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); }).click(function () {
                        //反向排序狀態聲明
                        var newDirection = 1;
                        if ($(this).is('.sorted-asc')) {
                            newDirection = -1;
                        }
                        var rows = $table.find('tbody>tr').get(); //將數據行轉換為數組
                        $.each(rows, function (index, row) {
                            row.sortKey = findSortKey($(row).children('td').eq(column));
                        });
                        rows.sort(function (a, b) {
                            if (a.sortKey < b.sortKey) return -newDirection;
                            if (a.sortKey > b.sortKey) return newDirection;
                            return 0;
                        });
                        $.each(rows, function (index, row) {
                            $table.children('tbody').append(row);
                            row.sortKey = null;
                        });

                        $table.find('thead td').removeClass('sorted-asc').removeClass('sorted-desc');
                        var $sortHead = $table.find('thead td').filter(':nth-child(' + (column + 1) + ')');
                        //實現反向排序
                        if (newDirection == 1) {
                            $sortHead.addClass('sorted-asc');
                        } else {
                            $sortHead.addClass('sorted-desc');
                        }

                        //移除已排序的列的樣式,添加樣式到當前列
                        $table.find('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted');
                        $table.trigger('repaginate');
                    });
                }
            });
        });
    });

 

 　　Html代碼如下：

 

<table id="tblGrid">
    <thead>
        <tr>
            <td style="width: 10%;">
                員工工號
            </td>
            <td style="width: 10%;">
                員工姓名
            </td>
            <td style="width: 15%;">
                職務名稱
            </td>
            <td  class="sort-numeric" style="width: 10%;">
                得分
            </td>
            <td class="sort-alpha" style="width: 10%;">
                績效考核等級<br />
                （直接主管）
            </td>
            <td style="width: 25%;">
                事例說明
            </td>
            <td class="sort-alpha"  style="width: 10%;">
                績效考核等級<br />
                （上級主管）
            </td>
            <td style="width: 10%;">
                績效考核等級<br />
                （部門主管）
            </td>
        </tr>
    </thead>
    <tbody>
        <!--#RowBegin#-->
            <tr rowindex='1'>
                <td height="28px">
                    0710
                </td>
                <td>
                    張三
                </td>
                <td>
                    客服支持
                </td>
                <td>
                    100
                </td>
                <td class="director_1">
                    優秀
                </td>
                <td>
                    李四  直接主管考評信息 
                </td>
                <td>
                    待改進
                </td>
                <td>
                    <select id="model_RANK_0" name="Table:model:RANK:0">
                        <option value="">-請選擇-</option>
                        <option value="優秀" >優秀</option>
                        <option value="優良" >優良</option>
                        <option value="良好" >良好</option>
                        <option value="待改進" selected>待改進</option>
                        <option value="不勝任" >不勝任</option>
                    </select>
                </td>
            </tr>
            <tr rowindex='2'>
                <td height="28px">
                    0085
                </td>
                <td>
                    王五
                </td>
                <td>
                    客服支持
                </td>
                <td>
                    100
                </td>
                <td class="director_2">
                    優良
                </td>
                <td>
                    事例說明
                </td>
                <td>
                    優良
                </td>
                <td>
                    <select id="model_RANK_1" name="Table:model:RANK:1">
                        <option value="">-請選擇-</option>
                        <option value="優秀" >優秀</option>
                        <option value="優良" selected>優良</option>
                        <option value="良好" >良好</option>
                        <option value="待改進" >待改進</option>
                        <option value="不勝任" >不勝任</option>
                    </select>
                </td>
            </tr>
            <tr rowindex='3'>
                <td height="28px">
                    0712
                </td>
                <td>
                    周氏
                </td>
                <td>
                    客服支持
                </td>
                <td>
                    100
                </td>
                <td class="director_3">
                    優秀
                </td>
                <td>
                    直接主管考評信息
                </td>
                <td>
                    優秀
                </td>
                <td>
                    <select id="model_RANK_2" name="Table:model:RANK:2">
                        <option value="">-請選擇-</option>
                        <option value="優秀" selected>優秀</option>
                        <option value="優良" >優良</option>
                        <option value="良好" >良好</option>
                        <option value="待改進" >待改進</option>
                        <option value="不勝任" >不勝任</option>
                    </select>
                </td>
            </tr>
        <!--#RowEnd#-->
    </tbody>
</table>

css:

<style>
        #header
        {
            width: 1000px;
            margin-left: auto;
            margin-right: auto;
            font-weight:bold;
        }
        #tblGrid
        {
            border-collapse: collapse;
            width: 1000px;
            border: 0;
            cellpadding: 0;
            cellspacing: 1;
            margin-left: auto;
            margin-right: auto;
        }
        #tblGrid thead tr td
        {
            color: #025aa4;
            background-color: #def3fc;
            height: 36px;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
        }
        #tblGrid th, #tblGrid td
        {
            border: 1px solid #E1E1E1;
            text-align: center;
        }
        .hover
        {
            background-color: #5dd354;
            cursor: pointer;
        }
        .sorted
        {
            background-color: oldlace;
        }
        .clickable
        {
            text-decoration: underline;
        }
    </style>

 

利用jQuery的ready事件即可實現排序功能，

頁面效果如圖：

點擊查看源代碼http://files.cnblogs.com/wuzhsh/SortTable.rar