Uncaught Error sortNatural (im sorting strings)
MoMack20 opened this issue · 41 comments
Here's the console error:
jquery.tablesorter.js:1522 Uncaught TypeError: a.replace is not a function
at $.extend.tablesorter.ts.sortNatural (http://localhost:62126/Scripts/tablesorter/jquery.tablesorter.js:1522:12)
at $.extend.tablesorter.ts.sortNaturalAsc (http://localhost:62126/Scripts/tablesorter/jquery.tablesorter.js:1548:15)
at http://localhost:62126/Scripts/tablesorter/jquery.tablesorter.js:858:61
at Array.sort (native)
at multisort (http://localhost:62126/Scripts/tablesorter/jquery.tablesorter.js:820:11)
at http://localhost:62126/Scripts/tablesorter/jquery.tablesorter.js:796:6
And here's a screen:
It happens when sorting on the #packages column which is a string. Odd thing is, it only happens when I add a column for the table for expanding a row. The expansion and everything works with child table, but then sorting on this column breaks. I have 19 columns with the expansion column and 18 without it (when it sorts fine). I'm at a loss with where to go from here. Any help is appreciated
Hi @MoMack20!
The natural sort algorithm doesn't convert the values it is sorting into strings... this was done because the conversion was making the sort take a lot longer in older versions of IE. It probably isn't necessary anymore, but since it is still in place... to get around this issue, make sure to set the # Packages column parser to digit:
<th class="sorter-digit"># Packages</th>The columns are strings though. That's what's confusing. No other numerical column in the table sorts using sortNatural. Only this one. And only after I add the 19th column into the table
Thanks for the speedy response btw. I really appreciate it
If you could duplicate the issue in a demo, it would make it easier for me to troubleshoot the problem.
There... I'm going to stop worrying about slow IE 😸
I don't think I would be able to recreate this anomaly. Its only happened so far when add that 19th column. Nothing changes in the table but a column at the beginning of the table that has "+" for all the rows. I'll try to get you more details
Try the updated version in the master branch... I've only modified the jquery.tablesorter.js file. The next release will be shipped very soon.
I'm working with fork 2.28.0
On the debug, why does it not show the last 3 columns?
Is that the debug after the columns are added and an "updateAll" is triggered?
All the columns are added to dom at one time before the tablesorter function is called
In that case, it sounds like the HTML of the extra columns might not be valid.
I construct the html the exact same way for another table that has less columns and everything works fine.
Really tryna wrap my head around this lol. I might just have to suck it up and spend some time trying to replicate this in a demo
Check the HTML in the DOM... use the developer tools to inspect it.
The DOM looks fine to me.
Every other row is identical and the header table matches.
Adding that first column with the "+" seems to be what triggers the problem (without that column it works great).
Here's the error message since I update the tablesorter.js
I even added the suffix "box(es)" onto the column thats messing up to make sure its a string and it still doesn't work
I'm sorry for the inconvenience. It seems like such a unique case that its something that I'm doing wrong, but I just can't pin it down :/
Try adding a "sorter-false" to disable sorting for that column - https://jsfiddle.net/bbxxomhx/437/
Disabling works. But I would really like to be able to sort by that column if I could.
it's a column full of +'s isn't it?
That column works. When its clicked it adds and child row and then it changes to a "-". You can sort by which row is displaying its child, which works. The column in the first image with the header "# Pacakges" is the one the that causes the error.
It seems that the 17th column always has the sorting error. I've shuffled the column order and it doesn't matter which column-value is there, the 17th always errors on sort.
In the debug log, does the parser get set to "digit"? Again, a "sorter-digit" class name should be added to the header cell.
The log only shows the first 16 columns. It errors out on pure strings as well (when all the rows for that column are "yes"
I'm using the scroller widget if that makes any difference
Stepping through the debugger.
this is in the file jquery.tablesorter.js
In the locals, you can see that the variable "a" is a table row. And it is pointed a the last row in my table
Please try v2.28.13 and see if it resolves your issue.
Hello again Mottie, sorry I was away over the weekend. I updated to v2.28.13 and no longer get a console error, but a sort is not being applied to the column.
A table row is still being passed in for sorting instead of the contents of each column. Is there a script that I could have written that interferes with the sorting script?
Is there anyway I can get the debug to show me more than 16 columns?
Please share some code... I have not seen a single line of the code being used.
Haha, sorry about that. This is everything I use to interact with tablesorter
InitializeGrid: function(tableHtml, container, tableId) {
$(container).children().each(function () {
if($(this).attr("id") != "spinner")
$(this).remove();
});
$(container).append(tableHtml);
var $scroller = $('.tablesorter-scroller-table');
var scrollPos = 0;
$(".Grid").tablesorter({
cssChildRow: "childTableRow",
theme: "metro-dark",
widgets: ['scroller', 'zebra'],
widgetOptions: {
scroller_height: "650",
scroller_upAfterSort: false,
zebra: ["odd", "even"],
},
debug: true
})
.bind("sortStart", function (e, t) {
ShowLoadingSpinner();
$scroller = $('.tablesorter-scroller-table');
scrollPos = $scroller.scrollspy().scrollTop();
})
.bind("sortEnd", function (e, table) {
$(".tablesorter-header").each(function () {
$(this).find("div").html(function () {
return $(this).data("noSort");
});
});
$(".tablesorter-headerAsc").each(function () {
$(this).find("div").html(function () {
return $(this).data("sortUp");
});
});
$(".tablesorter-headerDesc").each(function () {
$(this).find("div").html(function () {
return $(this).data("sortDown");
});
});
$("#GridContainer").width("80%");
$("#" + tableId).tablesorter().trigger("update", false);
$("#GridContainer").width("99.6%");
$("#" + tableId).tablesorter().trigger("resize");
$scroller.scrollTop(scrollPos);
FillRemainingHeight(tableId);
HideLoadingSpinner();
});
$(".Grid").find("th").find("div").each(function () {
$(this).data("sortUp", "<span style=\"float:right;\">▲</span>" + "<span>" + $(this).html() + "</span>");
$(this).data("sortDown", "<span style=\"float:right;\">▼</span>"+ "<span>" + $(this).html() + "</span>");
$(this).data("noSort", $(this).html());
});
FillRemainingHeight(tableId);
$(window).resize(function () {
FillRemainingHeight(tableId);
})
$(".Grid").tablesorter().trigger("update", false);
}
Sorry, I've been busy/distracted recently. Did you find a solution?
I just swapped places between one of the columns that won't need sorting with that column. Such a peculiar occurrence though.
@MoMack20 Does your table have all rows the same length? I saw behavior like this (and even breaking on column 17), and eventually tracked it down to having a footer row that had fewer columns than the main tbody. Adding empty cells to that row fixed my sorting for all columns.
!!!! I think that's it! I put together all the table stuff on the server side and I don't think i changed my colspan for the footer. I'll try it when i get back to work
It worked! It would've been another week or so until i realized that mistake. Gotta remember to always check the footer when the error doesnt make any sense lol
I just added a console.error message when a mismatch of column size is found. By default, only the thead and tfoot are checked. The cells in the tbody are only checked by certain widgets like the math and column selector widget (only when a colspan exists).
You'll now see an error message similar to this:
Invalid or incorrect number of columns in the THEAD or TFOOT; expected x, but found y columns
This change seems to break if using columnSelector widget with a foot using colspan, since the colspan is updated to count only visible rows, the thead to tfoot count will not match
last commits fixed my reported issue
Fixed in v2.28.15!