如何使用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