Streaming live at 10am (PST)

jQuery Table sorting string issue

I have some code for a table sort that is working as desired in a codepen but not inside of Webflow. The problem is that the sort inside of my Webflow demo is only taking the first digit of the string and not the entire string.

If you click the table header (Qty) you can see how it is sorting.

Does anyone know why the code works in codepen and not Webflow?

CODEPEN: https://codepen.io/moofawsaw/pen/LwYvmq

https://table-test-90bd6a.webflow.io/

https://preview.webflow.com/preview/table-test-90bd6a?utm_medium=preview_link&utm_source=dashboard&utm_content=table-test-90bd6a&preview=f77f1e20d4b3cb042cc64c49437c4904&mode=preview

What happens if you put your custom code inside the <head> and not before the <body> closing tag?

Your code inside <head> tag will look like this

<script>
$(".th").click(function() {
  function getCellValue(row, index) {
  return $(row)
    .find(".data")
    .eq(index)
    .html();
}
  function comparer(index) {
  return function(a, b) {
    var valA = getCellValue(a, index),
      valB = getCellValue(b, index);
    return $.isNumeric(valA) && $.isNumeric(valB)
      ? valA - valB
      : valA.localeCompare(valB);
  };
}
  var table = $(this)
    .closest(".table")
  .find(".list")
    .eq(0);
  var rows = table
    .find(".tr:not(:has('.th'))")
    .toArray()
    .sort(comparer($(this).index()));
  this.asc = !this.asc;
  if (!this.asc) {
    rows = rows.reverse();
  }
  for (var i = 0; i < rows.length; i++) {
    table.append(rows[i]);
  }
});

// additional code to apply a filter
$(".table").each(function() {
  var table = $(this);
  var ths = table.find(".th").length;
  var filterrow = $("<div class='tr__input'>").insertAfter(
    $(this)
      .find(".th:last()")
      .closest(".tr")
  );
  for (var i = 0; i < ths; i++) {
    filterrow.append(
      $("<div class='th'>").append(
        $("<input>")
          .attr("type", "text")
          .keyup(function() {
            table.find(".tr").show();
            filterrow.find("input[type=text]").each(function() {
              var index =
                $(this)
                  .closest(".th")
                  .index() + 1;
              var filter = $(this).val() != "";
              $(this).toggleClass("filtered", filter);
              if (filter) {
                var el = ".data:nth-child(" + index + ")";
                var criteria = ":contains('" + $(this).val() + "')";
                table
                  .find(el + ":not(" + criteria + ")")
                  .closest(".tr")
                  .hide(); 
              }
            });
          })
      )
    );
  }
  filterrow.append(
    $("<div>").append(
      $("<input>")
        .attr("type", "button")
        .val("Clear Filter")
        .click(function() {
          $(this)
            .closest(".tr")
            .find("input[type=text]")
            .val("")
            .toggleClass("filtered", false);
          table.find(".tr").show();
        })
    )
  );
});

</script>
<style>
.list {
  display: flex;
  flex-direction: column;
}
.tr div,
.tr,
.tr__input {
  display: flex;
}
.tr div,
.th,
.data {
  flex: 1;
}
.table,
.data,
.th {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 2px;
}
.th {
  background-color: lightgrey;
}
</style>

Hi @danoszz thanks for taking a look but the code did not execute when placed in the <head>.

@danoszz -> jQuery is loaded before the “before body close” custom code area. So any scripts that are dependent upon it must be loaded there.

@webdev Thanks, good to know! Didn’t use jQuery with Webflow yet.

@moofawsaw I can’t find the exact problem yet, but you might funnel down the problem source if you take these steps:

  • Copy the HTML structure of your working Codepen into an HTML embed remove your other elements. Try if it works.
    • If yes; the problem is in your Webflow element markup.
    • If no; it’s in the custom code.
  • console.log('functionName') in each separate function to find which one is not executing

Let me know if this works!

@danoszz I put the codepen code inside of the HTML embed and it worked as it does on the codepen. Now my question becomes does this have to do with the Webflow CMS? The desired HTML structure includes CMS items so when I build out the Webflow HTML using the CMS, the code for sorting the numbers stops working as desired.

@moofawsaw could you maybe update your preview & live link? I will take a look what’s up.

@danoszz the preview link hasn’t changed from the original post. Thanks for helping!