HTML Table 排序

Table 排序

目的：不需要重新加载后台数据

function fnSort(val) {
    var table = $('#DetailTable')[0];   // target table
    var trs = table.getElementsByTagName("tr");
    if (trs.length <= 2) {   //single row
        return;
    }
    var arrObj = [];    //  data record
    for (var trIndex = 1; trIndex < trs.length; trIndex++) {
        var tds = trs[trIndex].getElementsByTagName("td");
        // data field
        arrObj.push({       
            MemberNo: tds[0].innerText,
            RecordType: tds[1].innerText,
            Type: tds[2].innerText,
            Name: tds[3].innerText,
            ChineseName: tds[4].innerText,
            Address: tds[5].innerText,
            ChineseAddress: tds[6].innerText,
            LastUpdateDate: tds[7].innerText
        });
    }
    if (val == "ChineseName" || val == "ChineseAddress") {   //The  Chinese field  need to special processing
        var temp = arrObj[0][val].localeCompare(arrObj[arrObj.length - 1][val]);
        if (temp > 0) {
            arrObj.sort(function (a, b) {        //ASC
                var x = a[val].toLowerCase();
                var y = b[val].toLowerCase();
                return x.localeCompare(y);
            });
        }
        else {
            arrObj.sort(function (b, a) {      // DESC
                var x = a[val].toLowerCase();
                var y = b[val].toLowerCase();
                return x.localeCompare(y);
            });
        }
    }
    else {   //string
        var temp = arrObj[0][val].toLowerCase() > arrObj[arrObj.length - 1][val].toLowerCase();
        if (temp) {
            arrObj.sort(function (a, b) {  //ASC
                var x = a[val].toLowerCase();
                var y = b[val].toLowerCase();
                if (x < y) { return -1; }
                if (x > y) { return 1; }
                return 0;
            });
        }
        else {
            arrObj.sort(function (b, a) {   // DESC
                var x = a[val].toLowerCase();
                var y = b[val].toLowerCase();
                if (x < y) { return -1; }
                if (x > y) { return 1; }
                return 0;
            });
        }
    }
    // Redraw table
    for (var trIndex = 1; trIndex < trs.length; trIndex++) {
        var tds = trs[trIndex].getElementsByTagName("td");
        tds[0].innerText = arrObj[trIndex - 1].MemberNo;
        tds[1].innerText = arrObj[trIndex - 1].RecordType;
        tds[2].innerText = arrObj[trIndex - 1].Type;
        tds[3].innerText = arrObj[trIndex - 1].Name;
        tds[4].innerText = arrObj[trIndex - 1].ChineseName;
        tds[5].innerText = arrObj[trIndex - 1].Address;
        tds[6].innerText = arrObj[trIndex - 1].ChineseAddress
        tds[7].innerText = arrObj[trIndex - 1].LastUpdateDate;
    }
}