How sort a table with JavaScript?

Question

Hi I want sort my Persian table with JavaScript when click on header. I use the w3school example. it is work correctly in English but in Persian some character not compute (گچ پژ) for sorting. also the number is incorrect and for example Instead of (1,2,3,4,5,6,7,9,10,11), it returns(1,10,11,2,3,4,5,6,7,8,9). how can I fix this? the code I use is:

        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>[email protected]</td>
                <td>ادمین</td>
      
            </tr>
            <tr>
                <td>2</td>
                <td>سعید</td>
                <td>شجاعی فرد</td>
                <td>[email protected]</td>
                <td>ادمین</td>
       
            </tr>
            <tr>
                <td>3</td>
                <td>حسین</td>
                <td>مرادی</td>
                <td>[email protected]</td>
                <td>عادی</td>
         
            </tr>
            <tr>
                <td>4</td>
                <td>مریم</td>
                <td>آرش</td>
                <td>[email protected]</td>
                <td>عادی</td>
         
            </tr>
            <tr>
                <td>5</td>
                <td>پویان</td>
                <td>جزینی</td>
                <td>[email protected]</td>
                <td>عادی</td>
       
            </tr>
            <tr>
                <td>6</td>
                <td>آرش</td>
                <td>ابراهمی</td>
                <td>[email protected]</td>
                <td>عادی</td>
      
            </tr>
            <tr>
                <td>7</td>
                <td>حامد</td>
                <td>امیر خسرو</td>
                <td>[email protected]</td>
                <td>عادی</td>
           
            </tr>
            <tr>
                <td>8</td>
                <td>جواد</td>
                <td>گودرزی</td>
                <td>[email protected]</td>
                <td>عادی</td>
            
            </tr>
            <tr>
                <td>9</td>
                <td>یوسف</td>
                <td>معمار</td>
                <td>[email protected]</td>
                <td>عادی</td>
             
            </tr>
            <tr>
                <td>10</td>
                <td>ژاله</td>
                <td>ژاله ای</td>
                <td>[email protected]</td>
                <td>عادی</td>
 
            </tr>
        </tbody>
    </table>

Can you add HTML so the problem is reproducible. Better still, can you insert a runnable snippet (using toolbar), so that when we run it we can see the sorting problem? — trincot
– trincot, Commented Sep 4, 2022 at 12:22
OK, Can you explain in detail where it goes wrong with the Persian? Most of us here don't know Persian, and wouldn't know what is wrong. — trincot
– trincot, Commented Sep 4, 2022 at 12:39
The wrong arrangement of numbers is obvious i want the number sort as 1,2,3,4,5,6,7,8,9,10 not 1,10,11,2,20,21,3,4,5,... ; And for the character for example in the 3rd column (ژاله) should be in the 5 row not 9 for the ascending sorting. and "گودرزی" should be in 7 row. — link
– link, Commented Sep 4, 2022 at 12:51
Yes the number sorting problem is obvious and has been answered several times before. I would focus your question on the issue with the Persian sorting only. Thanks for adding what is the expected sort order. — trincot
– trincot, Commented Sep 4, 2022 at 12:54

dave.tdv · Accepted Answer · 2022-09-04 14:11:53Z

1

The main reason why the sorting does not work properly is because you sort it as string. The solution is to convert the string to number so the sorting behaviour works as expected.

Below is the change point inside while loop.

  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;
    }
  }

edited Sep 4, 2022 at 14:11

answered Sep 4, 2022 at 12:48

dave.tdv

3951 gold badge3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

trincot Over a year ago

The Persian texts are not numbers

link Over a year ago

thank you. the number sorting is correct in your code but for the Persian character is still wrong. Even more wrong than before.

dave.tdv Over a year ago

I just fixed the code because I didn't aware that you also want to sort by other column. Could you please check if the latest snippet work as expected?

link Over a year ago

I copy this for in my project and only the number column sort correctly.

dave.tdv Over a year ago

The sort by email works as expected on my side (4th column from the left), though I cannot really confirm how the result looks like on Persian columns

|

Collectives™ on Stack Overflow

How sort a table with JavaScript?

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related