I have these two examples, which both use the same code but different sources of tablesorter. However one of them works as the other one doesn't.
$("table").tablesorter();
http://jsfiddle.net/lightheaded/x78cd/ (doesn't work)
http://jsfiddle.net/lightheaded/RYL54/ (works)
It should first sort by percent and then by users. However it doesn't recognize the second number to be a number. I have a similar situation on my site. What could be the issue? I'm using 2.14.4 min on my site as well.
Upgrade to a more recent version of table sorter. Recent version seems to parse out tokens from strings such as 99% coverage (12.08 million users) and 99% coverage (10.2 million users) and compare them one by one so strings that contain more than one number still sort out as expected (we have 10 compared with 12 in the above example).
OR: you can create a custom parser that normalizes the percentage and users; and use it:
$.tablesorter.addParser({
id: 'percentThenUsers',
is: function (s) {
return false;
},
format: function (s) {
// "99% coverage (12.08 million users)" gets converted to
// "1099 1012.08" which can then be sorted as text
var m = s.replace(/[^\d\.]/g, " ").replace(/ +/g, " ").split(" ");
return (+m[0] + 1000) + " " + (+m[1] + 1000);
},
type: 'text'
});
$(function () {
$("table").tablesorter({
debug: true,
headers: {
0: { sorter: 'percentThenUsers' }
}
});
});
Demo here
Tablesorter attempts to detect the content of table cells automatically. In this case it is finding text and not percentage or digit values.
The first demo is using the original tablesorter which doesn't use alphanumeric sorting, so it can only sort text blocks. Check out this updated demo where a row with this data is added:
<tr><td>10% coverage (1.0 million users)</td></tr>
The 10% is placed above 100% in ascending sorts - not what you would expect.
The second demo is using an updated version of tablesorter which does use alphanumeric sorting. It splits the text into blocks and is able to sort the content as you would expect. Here is an updated demo with the above row included.
If you "need" to use the original tablesorter, then use the parser provided by #SalmanA.
Related
I have looked at several other responses and tried them all but nothing works. I have the following in my table:
Date Severity
2016-04-24 Not Critical
2016-04-24 Critical [what I need returned]
2017-01-09 Not Critical
2017-09-13 Critical
I am trying to search for all rows where severity is Critical (value) for 2016 (year). So far I have:
table.search( year + " " + value ).draw();
This returns both rows for 2016. How can I get it to return just the row that I need?
You may need to enable and use regular expressions with search() and column().search() API methods.
Since you need to search two columns simultaneously, it may be better to combine two calls to column().search().
For example:
table
.column(0).search('2016')
.column(1).search('^Critical$', true, false)
.draw();
where 0 and 1 are indexes of your date and severity columns.
See this example for code and demonstration.
I have a table that binds data in the format of YYYY-####. In some cases there may be values 2012-456 and 2012-1234. Be default, the 2012-1234 will sort 'before' the 2012-456. If I change the sort to 'numeric', then it throws off other years (ex: would sort in order 2012-456, 2013-555, 2012-1234). I'm guessing I'll have to prepend 0's to the digits after the hyphen if less than 4 digits, but I have not been able to get the sorter to work. I have tried .addParser but I'm not familiar with that and have not been successful. Are there any good articles for what I'm looking for or does anyone know a way to accomplish this?
Here is an image of example data that is sorting incorrectly and would need to sort in order of year (first 4 digits) then number after hyphen:
**Also, the date should have been in a better format obviously, but in this case I'm not able to adjust how that is entered.
After debugging further I was finally able to get .addParser() to work, and condensed the code as much as I could. I guess because I am new(ish) to javascript, I didn't realize that the .length was counting spaces and/or returns in my html.
$('.tablesorter').tablesorter({
widgets: ['zebra'],
headers: {
0: {
sorter: 'licenseYear'
}
}
})
$.tablesorter.addParser({
id: 'licenseYear',
is: function (s) {
return false;
},
format: function (s) {
//pad zeros for max length of digits after hyphen
var pad = "0000";
//replace hyphen with needed zeros to pad number
var n = s.replace(/-/, pad.substring(s.length - 5));
return n;
},
type: 'numeric'
});
*EDIT: Condensed code with help from this thread about padding left: convert '1' to '0001' in JavaScript
I am having a strange issue with a Table Sorter Plugin (http://tablesorter.com/docs/)
The numerical sort seems to not work when sorting with $'s and ,'s. Here is a screenshot of what it is doing. Does anybody know how to fix this?
Here is my table sorting code on the page with the table
$(document).ready(function(load)
{
$("#myTable").tablesorter({
sortList: [[1,1]] // etc.
});
}
);
If it doesn't detect the type automatically (as it should), you can force it. Here is an example from the comments in the source code:
$('table').tablesorter({ headers: { 0: {sorter:"integer"}, 1: {sorter:"currency"} } });
In this case, it looks like the second column should be sorted as currency.
my experienced eyes saw that your list is mis-sorted if there is a comma "," as decimal character separator but the js expect it to have locale that uses "." as separator
you could easily replace the commas with dots just google for "jquery replace"
but i would rather introduce you n numeral.js, wich has handy functions http://numeraljs.com/
or even better would be to output the correct data format from serverside
btw with numeral you could simply do
number = numeral(number).format('$0.0.00');
Given the following: How would I go about making a function to calculate carriage based on user input (which I have already created with the id "carriage")?
/* Description: Update price function
* #param: $itemRow - Row Object
**/
var updatePrice = function ($itemRow) {
// Calculate the price of the row. Remove and $ so the calculation doesn't break
var price = $itemRow.find('#itemPrice').val().replace(",", "") * $itemRow.find('#itemQty').val();
var carriage = $itemRow.find('#carriage').val();
price = roundNumber(price, 2);
isNaN(price) ? $itemRow.find('#itemLineTotal').val("N/A") : $itemRow.find('#itemLineTotal').val(price);
update_total();
};
var update_total = function () {
var total = 0;
$('input#itemLineTotal').each(function (i) {
price = $(this).val().replace(",", "");
if (!isNaN(price)) total += Number(price);
});
total = roundNumber(total, 2);
$('input#invGrandTotal').val('\u20AC' + total);
};
First, some improvements your code:
You seem to use the same ID for inputs in multiple HTML table rows. HTML allows you to use an ID only once per document. In your case you should use classes instead of IDs.
You remove commas in all numbers. It is not clear if this is correct or not. Do you use the comma as thousands separator (then it is okay) or as decimal separator (then it is not)? This depends on your local number format.
You don't need the (custom?) function roundNumber(), you can use Number.toFixed() e.g. 10.toFixed(2) returns 10.00
In your update_total() function you remove the commas again, but you never added them when writing to each row's itemLineTotal field.
I recommend you to use a consistent coding style, e.g. you sometimes use camel case function names (updatePrice()), sometimes an underscore (update_total()).
In your code example, it looks like there is one carriage input per row. As this is not very common on invoices, I assumed that this was a mistake and there is only one such input in the whole invoice.
To calculate the grand total you have to calculate the sum of all itemLineTotals and then add the value of carriage. You should do that in update_total(). I created a fiddle which shows a working example, hope that helps:
http://jsfiddle.net/pascalockert/8G7mp/
(Perhaps you have to adapt the decimal and thousands separators as mentioned above. See lines 10, 11, 21 and 25. Also, please mind JavaScript's restrictions on floating point numbers)
I followed this guide to export an Excel Spreadsheet as an XML data file and then this guide to display the XML sheet as an HTML table on my website. It worked great. Now I "only" have to small issues remaining that I couldn't get solved.
(1) The output table contains numbers like 1.325667 but also lots of 0s. I would like the zeroes to be displayed as 0.00 and the numbers with many decimals to be displayed as 1.33. Basically, each number should be displayed with two decimals.
(2) The excel sheet contains hyperlinks to other pages on my website that I would like to keep when rendering the XML data file and then the HTML table. So far, that didn't work. Is this possible?
UPDATE I figured this part out. By breaking up the hyperlinks in just their character-strings, then adding new columns for these character strings, and then tweaking the source code to including
document.write("<tr><td><a href='");
document.write(x[i].getElementsByTagName("character-string")0].childNodes[0].nodeValue);
document.write(".php'>");
document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
document.write("</a></td>");
I was able to include hyperlinks.
The Excel-Sheet is formatted with these two aspects already integrated, but the conversion to an XML file seems to be the problem.
Thank you so much for your help (again and again :-))
UPDATE I now also found a way to do the rounding in Excel, but I'm still stuck with integers and numbers with only one decimal. Basically, I now "only" need a way to show every number with two decimal points, applying to integers (e.g. 0 should 0.00) and numbers with one decimal (e.g. 1.5 should be 1.50). JohnnyReeves' answer seems to be on the right track but I couldn't get it to work. Any other ideas?
The Number Object has the method toFixed():
1.325667.toFixed(2) = 1.33.
Running inside the loop of the XML, select the URL and add it to the link:
document.write("< a href=" + x[i].getElementsByTagName(< your URL link>) + ">);
document.write("some text");
document.write("< /a>");
The Number.toFixed method will only work on floating point values (eg: 2.1), but not on integers (eg: 2, or 0). You will need to convert your number type to a string type so you can format it for display and get consistent results regardless of the input. A function like this should do the trick:
function formatNumber(value) {
var parts,
trailingDigits,
formattedRemainder;
// Coerce the supplied value to a String type.
value = String(value);
// Break the supplied number into two parts, before and after the dot
parts = value.split(".");
// If there was no dot, there will only be one "part" and we can just
// add the trailing zeros.
if (parts.length === 1) {
formattedRemainder = "00";
}
else {
trailingDigits = parts[1];
if (trailingDigits.length === 0) {
// A dot, but no digits. (eg: 2. -> 2.00)
formattedRemainder = "00";
}
else if (trailingDigits.length === 1) {
// Add an extra trailing zero (eg: 2.1 -> 2.10)
formattedRemainder = trailingDigits + "0";
}
else {
// Just take the last two trailing digits.
formattedRemainder = trailingDigits.substring(0, 2);
}
}
// Build the final formatted string for display.
return parts[0] + "." + formattedRemainder;
}