I have this function:

function sortTable(index) {
  var table, rows, switching, i, x, y, shouldSwitch, array = [];
  table = $("table");
  switching = true;
  
  while (switching) {
    
    switching = false;
    rows = table.find("tbody tr:not(.table-extra-hidden)");

    
    for (i = 0; i < (rows.length); i  ) {
      
      shouldSwitch = false;
      
      x = rows.eq(i).find("td").eq(index);
      y = rows.eq(i   1).find("td").eq(index);
      
      if(sortOrder == "desc" && x.find('.primary-info').text().replace(/[^a-zA-Z0-9 _]/g,'') < y.find('.primary-info').text().replace(/[^a-zA-Z0-9 _]/g,''))
      {
        shouldSwitch = true;
        break;
      }
      else
      {
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      
      if(sortOrder == "asc")
      {
        rows.eq(i).insertBefore(rows.eq(i-1));
      }
      else
      {
        rows.eq(i).insertAfter(table.find("tr:not(.table-extra-hidden)").last());
      }
      switching = true;
    }
  }
}

The click event:

$(window).on("load", function(){
  $("a").click(function(e){
    if($(this).attr("href") == "#")
    {
      e.preventDefault();
      e.stopPropagation();
    }

    if($(this).closest("th").length)
    {
      $("th").not($(this).closest("th")).find("a").removeClass("is-sorted sort-desc sort-asc")
      if($(this).hasClass("is-sorted"))
      {
        if($(this).hasClass("sort-desc"))
        {
          $(this).removeClass("sort-desc").addClass("sort-asc");
        }
        else
        {
          $(this).removeClass("sort-asc").addClass("sort-desc");
        }
      }
      else
      {
        $(this).addClass("is-sorted sort-desc");
      }

      //get table column index.
      var index = $(this).closest("th").index();

      var switching, table, rows, x, y, shouldSwitch;

      if($(this).hasClass("sort-desc"))
      {
        sortOrder = "desc";
      }
      else if($(this).hasClass("sort-asc"))
      {
        sortOrder = "asc";
      }
      sortTable(index);
    }
}

It's used to sort this table:

<table>
    <thead>
      <tr>
        <th><a href="#">Date</a></th>
        <th><a href="#">Amount</a></th>
        <th><a href="#">Trade</a></th>
        <th ></th>
      </tr>
    </thead>
    <tbody>
      <tr data-paired="1" tabindex="0">
        <td>
          <b>Bitcoin Buy</b>
          <br />
          <span >Jan 21, 2022</span>
        </td>
        <td>
          <b >$1,800.00</b>
          <br>
          <span>0.00035678 BTC at $34,557.80</span>
        </td>
        <td>
          <span >Trade</span>
        </td>
        <td >
          <a href="#">
            <span  data-icon-name="chevron-down"></span>
          </a>
        </td>
      </tr>
      <tr  data-paired="1">
        <td>
          <b>Status</b>
          <br>
          <span>Filled</span>
          <br><br>
          <b>Filed</b>
          <br>
          <span>Jan 1, 2022, 6:31 AM EST</span>
        </td>
        <td>
          <b>Paid With</b>
          <br>
          <span>20.00000000 GUSD</span>
        </td>
        <td></td>
        <td></td>
      </tr>
      <tr data-paired="2" tabindex="0">
        <td>
          <b >Dogecoin Buy</b>
          <br />
          <span >Jan 20, 2022</span>
        </td>
        <td>
          <b >$50.00</b>
          <br>
          <span >0.00035678 BTC at $34,557.80</span>
        </td>
        <td>
          <span >Trade</span>
        </td>
        <td >
          <a href="#">
            <span  data-icon-name="chevron-down"></span>
          </a>
        </td>
      </tr>
      <tr data-paired="3" tabindex="0">
        <td>
          <b >Bitcoin Trade</b>
          <br />
          <span >Jan 21, 2022</span>
        </td>
        <td>
          <b >$1,200.00</b>
          <br>
          <span >0.00035678 BTC at $34,557.80</span>
        </td>
        <td>
          <span >ACH Deposit</span>
        </td>
        <td >
          <a href="#">
            <span  data-icon-name="chevron-down"></span>
          </a>
        </td>
      </tr>
      <tr data-paired="4" tabindex="0">
        <td>
          <b >Bitcoin Interest Paid</b>
          <br />
          <span >Dec 15, 2021</span>
        </td>
        <td>
          <b >$1,900.00</b>
          <br>
          <span >0.00035678 BTC at $34,557.80</span>
        </td>
        <td>
          <span >Interest Payment</span>
        </td>
        <td >
          <a href="#">
            <span  data-icon-name="chevron-down"></span>
          </a>
        </td>
      </tr>
      <tr data-paired="5" tabindex="0">
        <td>
          <b >Deposit from Chase</b>
          <br />
          <span >Dec 1, 2021</span>
        </td>
        <td>
          <b >$800.00</b>
          <br>
          <span >0.00035678 BTC at $34,557.80</span>
        </td>
        <td>
          <span >Trade</span>
        </td>
        <td >
          <a href="#">
            <span  data-icon-name="chevron-down"></span>
          </a>
        </td>
      </tr>
    </tbody>
  </table>

There are two things:

Firstly, a column when sorted is finding the class name "primary-info" to sort from that data point (vs everything) and secondly each column has different data points that can be sorted by. This doesn't seem to be working and just infinitely looping instead sorting and stopping. What am I missing here?

CodePudding user response：

The problem is in this part of the code:

      if(sortOrder == "desc" && x.find('.primary-info').text().replace(/[^a-zA-Z0-9 _]/g,'') < y.find('.primary-info').text().replace(/[^a-zA-Z0-9 _]/g,''))
      {
        shouldSwitch = true;
        break;
      }
      else
      {
        shouldSwitch = true;
        break;
      }

This means that whatever the if condition evaluates to, it will set shouldSwitch to true and exit the inner loop. As a consequence the outer loop will keep iterating.

You should just remove the else block.

NB: it is more common practice to use the Array#sort method for sorting a table. First put rows in an array, sort it, and then populate the table again in that order.