Colspan breaks ordering of cells using data attribute

[Daichi Hoang]

Hello,

JS Fiddle demo: https://jsfiddle.net/daihoang/5os6uypj/5/

I have a simple table where the first column has a mixture of cells with dates and cells with text.

To sort this, I have added a data attribute to each cell and using the custom parser to sort by this attribute. In the example above, it's simply "data-row", starting at 0 for the first row

However, I am running into an issue where the cells using "colspan" are not being sorted according to their data attribute (data-rows 4, 7 and 10)

If i remove the colspan, it works as expected.

I read https://mottie.github.io/tablesorter/docs/example-colspan.html and I don't think I am missing anything, it's a fairly simple implementation without any widgets.

Can anyone help?

[Rob Garrison]

Hi @daichihoang!

Maybe the static row widget will fulfill your need?

[Daichi Hoang]

Hi @daichihoang!

Maybe the static row widget will fulfill your need?

Hi @Mottie thanks for such a quick reply.

Unfortunately those text cells still need to be ordered, they are "events" that occured in between the 2 dates that they sit between.

Can you let me know if I tried to do it the right way by using data attributes?

[Rob Garrison]

Ahh, you're right, there is a small bug in the code where it wasn't saving the parsed cell value. I'll have it fixed and available in the next update.

The following code & demo won't work until the update is available - demo

Switch to use the built-in data-text attribute that is automatically extracted, and include a date in the same format as the other first column cells

<td data-text="08-Dec-19">This Race</td>

And use this modified parser

var months = [
  "jan",
  "feb",
  "mar",
  "apr",
  "may",
  "jun",
  "jul",
  "aug",
  "sep",
  "oct",
  "nov",
  "dec"
];

$.tablesorter.addParser({
  id: "customDate",
  format: function(str) {
    if (str) {
      var parts = str.split("-");
      var month = $.inArray(parts[1].toLowerCase(), months) + 1;
      var date = new Date(month + "/" + parts[0] + "/" + parts[2]);
      return date instanceof Date && isFinite(date) ? date.getTime() : "";
    }
    return str;
  },
  type: "numeric"
});

$("#myTable").tablesorter({
  textAttribute: "data-text", // default value
  duplicateSpan: false,
  headers: {
    0: { sorter: "customDate" }
  }
});

[Daichi Hoang]

@Mottie Thankyou very much for resolving this! I really appreciate your time and plugin. Thankyou!!