JQuery tablesorter with number_format ();
I am using the jQuery tablesorter plugin and I would like to make my table more readable by using the comma separator in thousands, ie number_format ($ value, 0, ",", ");
However, this breaks the sort. I was looking for a solution (for example http://lab.christianmontoya.com/jquery-tablesort-numbers-commas/ ) but I was unable to set it up and place the table. I'm new to scripting so please be lenient.
What should my javascript block be like?
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#myTable").tablesorter( {
sortList: [[1,1], [2,1]],
widgets: ['zebra'],
} );
});
</script>
</head>
<body>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Username</th>
<th>Level</th>
<th>Experience</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fiery</td>
<td><?php echo number_format(2400, 0, " ", ","); ?></td>
<td><?php echo number_format(378433689, 0, " ", ",");?></td>
</tr>
<tr>
<td>Sixten</td>
<td><?php echo number_format(1600, 0, " ", ","); ?></td>
<td><?php echo number_format(1000000000, 0, " ", ",");?></td>
</tr>
<tr>
<td>Penny</td>
<td><?php echo number_format(885, 0, " ", ","); ?></td>
<td><?php echo number_format(8900002, 0, " ", ","); ?></td>
</tr>
<tr>
<td>Petra</td>
<td><?php echo number_format(2400, 0, " ", ","); ?></td>
<td><?php echo number_format(398433889, 0, " ", ","); ?></td>
</tr>
<tr>
<td>Neu</td>
<td><?php echo number_format(4974, 0, " ", ","); ?></td>
<td><?php echo number_format(198433889, 0, " ", ","); ?></td>
</tr>
</tbody>
</table>
</body>
+3
source to share
1 answer
You need to apply your own format to the header / column you want:
Markup:
<table id="myTable" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th>
Price
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1,000.00
</td>
</tr>
<tr>
<td>
100,100.00
</td>
</tr>
<tr>
<td>
100,980.00
</td>
</tr>
<tr>
<td>
100,122.00
</td>
</tr>
<tr>
<td>
120,122.00
</td>
</tr>
<tr>
<td>
540,122.00
</td>
</tr>
<tr>
<td>
222,122.00
</td>
</tr>
<tr>
<td>
100,020.00
</td>
</tr>
<tr>
<td>
100,251.00
</td>
</tr>
<tr>
<td>
100,364.00
</td>
</tr>
<tr>
<td>
300,122.00
</td>
</tr>
</tbody>
</table>
JQuery
$(document).ready(function () {
jQuery.tablesorter.addParser({
id: "fancyNumber",
is: function (s) {
return /^[0-9]?[0-9,\.]*$/.test(s);
},
format: function (s) {
return jQuery.tablesorter.formatFloat(s.replace(/,/g, ''));
},
type: "numeric"
});
$("#myTable").tablesorter({
headers: { 0: { sorter: 'fancyNumber'} },
widgets: ['zebra']
});
});
JSFiddle: http://jsfiddle.net/eAgDC/
+4
source to share