如何使用 JavaScript 對表格進行排序？

Question

嗨，我想在單擊 header 時使用 JavaScript 對我的波斯表進行排序。 我使用 w3school 示例。 它在英語中可以正常工作，但在波斯語中，某些字符無法計算（گچپژ）進行排序。 數字也不正確，例如，它不是（1,2,3,4,5,6,7,9,10,11），而是返回（1,10,11,2,3,4,5,6 ,7,8,9)。 我怎樣才能解決這個問題？ 我使用的代碼是：

 function sortTable(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("myTable"); 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.rows; /*Loop through all table rows (except the first, which contains table headers):*/ for (i = 1; i < (rows.length - 1); 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 (dir == "asc") { if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { //if so, mark as a switch and break the loop: shouldSwitch = true; break; } } else if (dir == "desc") { if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { //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:*/ rows[i].parentNode.insertBefore(rows[i + 1], 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") { dir = "desc"; switching = true; } } } }

 <table class="table table-light table-striped border table-hover text-center w-100" id="myTable"> <thead class="table thead-dark"> <tr> <th style="cursor:pointer" onclick="sortTable(0)"><i class="bi bi-sort-down"></i>ردیف</th> <th style="cursor:pointer" onclick="sortTable(1)">نام<i class="bi bi-sort-down"></i></th> <th style="cursor:pointer" onclick="sortTable(2)">فامیل<i class="bi bi-sort-down"></i></th> <th style="cursor:pointer" onclick="sortTable(3)"><i class="bi bi-sort-down"></i>ایمیل</th> <th style="cursor:pointer" onclick="sortTable(4)"><i class="bi bi-sort-down"></i>نوع کاربری</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>صادق</td> <td>شجاعی فرد</td> <td>john@example.com</td> <td>ادمین</td> </tr> <tr> <td>2</td> <td>سعید</td> <td>شجاعی فرد</td> <td>mary@example.com</td> <td>ادمین</td> </tr> <tr> <td>3</td> <td>حسین</td> <td>مرادی</td> <td>july@example.com</td> <td>عادی</td> </tr> <tr> <td>4</td> <td>مریم</td> <td>آرش</td> <td>july@example.com</td> <td>عادی</td> </tr> <tr> <td>5</td> <td>پویان</td> <td>جزینی</td> <td>july@example.com</td> <td>عادی</td> </tr> <tr> <td>6</td> <td>آرش</td> <td>ابراهمی</td> <td>july@example.com</td> <td>عادی</td> </tr> <tr> <td>7</td> <td>حامد</td> <td>امیر خسرو</td> <td>july@example.com</td> <td>عادی</td> </tr> <tr> <td>8</td> <td>جواد</td> <td>گودرزی</td> <td>july@example.com</td> <td>عادی</td> </tr> <tr> <td>9</td> <td>یوسف</td> <td>معمار</td> <td>july@example.com</td> <td>عادی</td> </tr> <tr> <td>10</td> <td>ژاله</td> <td>ژاله ای</td> <td>july@example.com</td> <td>عادی</td> </tr> </tbody> </table>

Answer 1

排序無法正常工作的主要原因是因為您將其排序為字符串。 解決方案是將字符串轉換為數字，以便排序行為按預期工作。

下面是while循環內的變化點。

  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /*Loop through all table rows (except the
        first, which contains table headers):*/
    for (i = 1; i < rows.length - 1; 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].innerHTML;
      y = rows[i + 1].getElementsByTagName("td")[n].innerHTML;
      /*check if the two rows should switch place,
            based on the direction, asc or desc:*/

      let first = 0;
      let second = 0;

      if (n === 0) {
        first = parseInt(x);
        second = parseInt(y);
      } else {
        first = x.localeCompare(y, "fa");
      }

      if (
        (dir == "asc" && first > second) ||
        (dir == "desc" && first < second)
      ) {
        //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:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      //Each time a switch is done, increase this count by 1:
      switchcount++;
      continue;
    }
    /*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") {
      dir = "desc";
      switching = true;
    }
  }