1、先引入含有如下插件的js (function($){ //插件 $.extend($,{ //命名空間 sortTable:{ sort:function(tableId,Idx,that){ var table = document.getElementById(tableId); var t
1、先引入含有如下插件的js
(function($){
//插件
$.extend($,{
//命名空間
sortTable:{
sort:function(tableId,Idx,that){
var table = document.getElementById(tableId);
var tbody = table.tBodies[0];
var tr = tbody.rows;
var trValue = new Array();
for (var i=0; i<tr.length; i++ ) {
trValue[i] = tr[i]; //將表格中各行的信息存儲在新建的數組中
}
if (tbody.sortCol == Idx) {
trValue.reverse(); //如果該列已經進行排序過了，則直接對其反序排列
if(that.children[0].className=='home-triangle-down') {
that.children[0].className="home-triangle-up";
} else {
that.children[0].className="home-triangle-down";
}
} else {
trValue.sort(function(tr1, tr2){
var value1 = tr1.cells[Idx].innerHTML;
var value2 = tr2.cells[Idx].innerHTML;
return value2.localeCompare(value1);
});
that.children[0].className="home-triangle-down";
}
var fragment = document.createDocumentFragment(); //新建一個代碼片段，用於保存排序後的結果
for (var i=0; i<trValue.length; i++ ) {
fragment.appendChild(trValue[i]);
}
tbody.appendChild(fragment); //將排序的結果替換掉之前的值
tbody.sortCol = Idx;
}
}
});
})(jQuery);
2、添加排序的箭頭（使用css畫箭頭圖標）：
a>向上的箭頭
.home-triangle-up{
border-color: #349cd3 transparent;
border-width: 0px 6px 6px 6px;
border-style: solid;
/* float: right; */
margin: 0px 0px 3px 10px;
display: inline-block;
}
b>向下的箭頭
.home-triangle-down{
border-color: #349cd3 transparent;
border-width: 5px 5px 0px 5px;
border-style: solid;
/* float: right; */
margin: 0px 0px 3px 10px;
display: inline-block;
}
3、綁定點擊事件
<th style="width:150px;cursor: pointer;" onclick="$.sortTable.sort('D_PREPAY_INFO_LIST', 9, this)">生效日期<span class="home-triangle-down"></span></th>
