Sort rows in table

user_6036065 0
Viewed 107

I'm trying to sort rows in alphabetical order based on which column header is clicked using jQuery. It works fairly fine when debugging except that it doesn't actually switch the rows in the HTML and so it doesn't display a sorted table on the webpage. I'm using Thymeleaf th:text to populate the table body rows but for the sake of this example, I hardcoded some values. You can run it here: https://jsfiddle.net/tg2khrd4

Javascript:

var table = $("#table");

$("#subject, #from, #id")
  .wrapInner('<span title="sort this column"/>')
  .each(function () {
    var th = $(this),
      thIndex = th.index(),
      inverse = false;

    th.click(function () {
      table
        .find("tbody")
        .find("td")
        .filter(function () {
          return $(this).index() === thIndex;
        })
        .sort(
          function (a, b) {
            return $.text([a]) > $.text([b])
              ? inverse
                ? -1
                : 1
              : inverse
              ? 1
              : -1;
          },
          function () {
            // parentNode is the element we want to move
            return this.parentNode;
          }
        );

      inverse = !inverse;
    });
  });

HTML:

<table class="table table-hover" id="table" style="background-color:#fff;border: 1px solid #cccccc">
  <thead style="background-color:#981e32;">
    <tr>
      <td class="tdsubj" id="id" style="padding:5px;">Id
      </td>
      <td class="tdsubj" id="subject" style="padding:5px;">
        Subject
      </td>
      <td class="tdsubj" id="from" style="padding:5px;">
        From
      </td>
      <td class="tdsubj" id="date" style="padding:5px;">
        Date
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Hello</td>
      <td>Thor</td>
      <td>2020-10-19</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Dinos Suck</td>
      <td>Meteor</td>
      <td>2020-9-5</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Big Ben won't stop ringing</td>
      <td>The Queen</td>
      <td>2020-8-19</td>
    </tr>
  </tbody>
</table>
jquery javascript
1 Answers

Once the td sorted... You just have to loop throught it and append it's parent tr in the table...

var table = $("#table");

$("#subject, #from, #id")
  // .wrapInner('<span title="sort this column"/>')
  .each(function () {
    var th = $(this),
      thIndex = th.index(),
      inverse = false;
      

    th.click(function () {
      let test = table
        .find("tbody")
        .find("td")
        .filter(function () {
          return $(this).index() === thIndex;
        })
        .sort(
          function (a, b) {
            return $.text([a]) > $.text([b])
              ? inverse
                ? -1
                : 1
              : inverse
              ? 1
              : -1;
          }

          // That is useless...
          /*function () {
                // parentNode is the element we want to move
                console.log(this.parentNode)
                return this.parentNode;
              }*/
        );

      // Added to demonstrate the sorting works
      console.clear()
      test.each(function () {
        console.log(this.innerText);
      });

      // Now to apply the sorting on the DOM
      // Find the tr containing it and append it to the table.
      test.each(function () {
        table.append($(this).parent("tr"))
      });

      inverse = !inverse;
    });
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover" id="table" style="background-color:#fff;border: 1px solid #cccccc">
      <thead style="background-color:#981e32;">
        <tr>
          <td class="tdsubj" id="id" style="padding:5px;">Id
          </td>
          <td class="tdsubj" id="subject" style="padding:5px;">
            Subject
          </td>
          <td class="tdsubj" id="from" style="padding:5px;">
            From
          </td>
          <td class="tdsubj" id="date" style="padding:5px;">
            Date
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Hello</td>
          <td>Thor</td>
          <td>2020-10-19</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Dinos Suck</td>
          <td>Meteor</td>
          <td>2020-9-5</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Big Ben won't stop ringing</td>
          <td>The Queen</td>
          <td>2020-8-19</td>
        </tr>
      </tbody>
    </table>

user_21595280
Related