Reputation: 99
I'm using the jQuery-based Tablesorter library in a Django-based website. I'm trying to get the "Pos" column in my table to sort according to a custom order which I am setting in the Parser function. I've tried following several articles (including this one and another one) but it still sorts alphabetically only.
The way it behaves...
JS
<script>
$(document).ready(function() {
//Disable sorting on specified columns
$("#fullTable thead th:eq(3)").data("sorter", false); //Monday
$("#fullTable thead th:eq(4)").data("sorter", false); //Tuesday
$("#fullTable thead th:eq(5)").data("sorter", false); //Wednesday
$("#fullTable thead th:eq(6)").data("sorter", false); //you get the idea...
$("#fullTable thead th:eq(7)").data("sorter", false);
$("#fullTable thead th:eq(8)").data("sorter", false);
$("#fullTable thead th:eq(9)").data("sorter", false);
$("#fullTable thead th:eq(10)").data("sorter", false); //Sunday
$.tablesorter.addParser({
// set a unique id
id: 'positions',
is: function(s) {
// return false so this parser is not auto detected
return false;
},
format: function(s) {
// format your data for normalization
return s.toLowerCase()
.replace(/A/, 0)
.replace(/E2/, 1)
.replace(/E1/, 2)
.replace(/C2/, 3)
.replace(/C1/, 4)
.replace(/SC/, 5)
.replace(/PC/, 6)
.replace(/AD/, 7);
},
// set type, either numeric or text
type: 'numeric'
});
$("#fullTable").tablesorter({
cancelSelection: true,
sortReset: true
});
});
</script>
HTML
<div class="mainTableContainer" style="overflow-x:scroll; overflow-y:hidden; width:fit-content; width:-moz-fit-content; height:auto; display:inline-block;">
<table id='fullTable' class="newtable tablesorter" border="1" alt="Staff Entry table" > <!--PABSO-278-->
<thead style="border: 1px solid black">
<tr>
<th><div style="width:100px">Week</div></th>
<th><div style="width:200px">Name</div></th>
<th class="sorter-positions"><div style="width:50px">Pos</div></th>
<th><div style="width:200px">Monday</div></th>
<th><div style="width:200px">Tuesday</div></th>
<th><div style="width:200px">Wednesday</div></th>
<th><div style="width:200px">Thursday</div></th>
<th><div style="width:200px">Friday</div></th>
<th><div style="width:200px">Saturday</div></th>
<th><div style="width:200px">Sunday</div></th>
</tr>
</thead>
Any help at all would be much appreciated!
Upvotes: 1
Views: 365
Reputation: 99
It was a foolish error of mine that a colleague pointed out:
format: function(s) {
// format your data for normalization
return s.toLowerCase()
.replace(/A/, 0)
.replace(/E2/, 1)
.replace(/E1/, 2)
.replace(/C2/, 3)
.replace(/C1/, 4)
.replace(/SC/, 5)
.replace(/PC/, 6)
.replace(/AD/, 7);
},
I am parsing my table data .toLowerCase(). Therefore when the .replace() calls are made looking for uppercase values, none are found!
Upvotes: 1