最近做的一个项目中需要自己写个表格排序的功能，于是就上网收集了一下，主要原理就是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事件即可实现排序功能，
页面效果如图：
