[JQuery] Table排序

2017-03-27

對Table的資料作排序

                    <table class="table table-striped" style="font-size:12px;" id="CheckResult">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>商品編號<span class="fa fa-sort" aria-hidden="true"></span></th>
                                <th>商品名稱</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>

<script>
    var theads = $("#CheckResult").children("thead").children("tr").find("th");
    var tbodys = $("#CheckResult").children("tbody").find("tr");
    var btnSort = $("span[class*=sort]");
    btnSort.on("click", function () {
        var elementAt = $($(this).parent()).index();    // 第幾欄(從0開始)
        var type = SortByIndex(elementAt, $(this).data("type"));    // 排序並取回排序方式(正序/倒序)
        $(this).data("type", type); // 回填排序方式

        // 更改排序圖示
        if (type === "OrderByAsc") {
            $(this).prop("class", "fa fa-sort-amount-asc")
        }
        else {
            $(this).prop("class", "fa fa-sort-amount-desc")
        }

        // 重新填入tbody
        $("#CheckResult").children("tbody").html("");
        $("#CheckResult").children("tbody").append(tbodys);
    });
    
    // 根據所需要排序的"欄"排序
    function SortByIndex(index, type) {
        var orderByType = "";
        if (type == null || type === "OrderByDesc") {
            // 正序
            ClearSort();
            tbodys.sort(function (x, y) {
                var vx = $($(x).find("th")[index]).text();
                var vy = $($(y).find("th")[index]).text();

                return vx > vy ? 1 : -1;
            });
            orderByType = "OrderByAsc";
        }
        else {
            // 倒序
            ClearSort();
            tbodys.sort(function (x, y) {
                var vx = $($(x).find("th")[index]).text();
                var vy = $($(y).find("th")[index]).text();

                return vx < vy ? 1 : -1;
            });
            orderByType = "OrderByDesc";
        }

        if ($(theads[0]).text() === "#") {
            // 有編號，需要重新整理編號
            var i = 1;
            tbodys.each(function (key, value) {
                $($(value).find("th")[0]).text(i++);
            });
        }

        return orderByType;
    }

    // 清除排序紀錄
    function ClearSort() {
        theads.each(function (key, value) {
            $(value).removeData("type");    // 清除排序紀錄
            $(value).children("span").prop("class", "fa fa-sort");  // 將排序圖示恢復預設
        });
    }
</script>

在有需要排序的地方加入 <span class="fa fa-sort" aria-hidden="true"></span>

就可以有排序功能了

PS:需引用Font Awesome

Write By Charley Chang

新手發文，若有錯誤還請指教，
歡迎留言或Mail✉給我