如何使用jquery或javascript快速對html表的1000行進行排序

Question

我想用JavaScript對HTML表的1000行進行排序。 它必須對文本框，數字等進行排序。

它適用於100行，但是當行數較大時，它將停止工作並關閉我的應用程序。

這是我的代碼：

  var Customtable;
    Customtable = document.getElementById('ExampleTable');
    //alert('custom table: ' + Customtable);

    function SortCustomTable(n, Isnormal) {
        var a, b, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
        switching = true;

        //Set the sorting direction to ascending:
        dir = "asc";
        /*Make a loop that will continue until
        no switching has been done:*/
        while (switching) {
            //start by saying: no switching is done:
            switching = false;

            //rows = table.getElementsByTagName("TR");

            /*Loop through all table rows (except the
            first, which contains table headers):*/

            var rowsCount = Customtable.rows.length - 1;
            for (i = 1; i < rowsCount ; i++) {

                //start by saying there should be no switching:
                shouldSwitch = false;
                /*Get the two elements you want to compare,
                one from current row and one from the next:*/

                //x = rows[i].getElementsByTagName("TD")[n];
                //y = rows[i + 1].getElementsByTagName("TD")[n];
                /*check if the two rows should switch place,
                based on the direction, asc or desc:*/
                if (Customtable.rows[0].cells[n].className.includes("Input")) {

                    a = Customtable.rows[i].cells[n].getElementsByTagName("Input")[0].value
                    b = Customtable.rows[i + 1].cells[n].getElementsByTagName("Input")[0].value
                }
                else {
                    a = Customtable.rows[i].cells[n].textContent;
                    b = Customtable.rows[i + 1].cells[n].textContent;
                }

                if (Customtable.rows[0].cells[n].className.includes("Number")) {
                    x = Number(a)
                    y = Number(b)
                }
                else if (Customtable.rows[0].cells[n].className.includes("Text")) {
                    x = a.toLowerCase()
                    y = b.toLowerCase()
                }
                //else {
                //    x = (table.rows[i].cells[n]).innerHTML.toLowerCase();
                //    y = (table.rows[i + 1].cells[n]).innerHTML.toLowerCase();
                //}

                if (dir == "asc") {
                    if (a > b) {
                        //if so, mark as a switch and break the loop:
                        shouldSwitch = true;
                        break;
                    }
                } else if (dir == "desc") {
                    if (a < b) {
                        //if so, mark as a switch and break the loop:
                        shouldSwitch = true;
                        break;
                    }
                }
            }
            if (shouldSwitch) {
                /*If a switch has been marked, make the switch
                and mark that a switch has been done:*/
                Customtable.rows[i].parentNode.insertBefore(Customtable.rows[i + 1], Customtable.rows[i]);
                switching = true;
                //Each time a switch is done, increase this count by 1:
                switchcount++;
            } else {
                /*If no switching has been done AND the direction is "asc",
                set the direction to "desc" and run the while loop again.*/

                if (switchcount == 0 && dir == "asc" && Isnormal == 1) {
                    dir = "desc";
                    switching = true;
                }
            }
        }
        alert('Done');
    }
</script>`

Answer 1

正如@BrahmaDev所述，服務器端可能很好（假設您可以訪問它）。 操縱和更新DOM的成本很高，但是如果您要根據JSON數據或其他內容自行渲染行（客戶端模板），則只要先對數據集進行排序並創建，對1000行的JSON對象進行排序就應該很好且快捷。將新的行作為代表所有行或DOM片段的連接字符串，並一口氣更新DOM。

這是一個解釋我在說什么的鏈接： https : //coderwall.com/p/o9ws2g/why-you-should-always-append-dom-elements-using-documentfragments