I'm using jquery tablesorter and I want to sort content. Some of my cells contains images, and others div.
With textExtraction I can sort them by images or div. I add two functions in the js part: the first for images, the second for div.
How can I use both of them ? I want a function to sort my table on images and div.
$(document).ready(function() {
$("#tableA").tablesorter({
sortList: [[0,0]],
textExtraction:function(s1){ if($(s1).find('img').length == 0) return $(s1).text(); else return $(s1).find('img').attr('alt');}
//textExtraction:function(s2){ if($(s2).find('div').length == 0) return $(s2).text(); else return $(s2).find('div').attr('class');}
});
});<html>
<head>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://mottie.github.io/tablesorter/dist/js/jquery.tablesorter.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<table id="tableA" class="tablesorter" style="width:65%">
<thead>
<tr>
<th align="center">Fromage</th>
<th align="center">Lait</th>
<th align="center">Pays</th>
<th align="center">jan.</th>
<th align="center">fév.</th>
<th align="center">mar.</th>
<th align="center">avr.</th>
<th align="center">mai</th>
<th align="center">juin</th>
<th align="center">juil.</th>
<th align="center">août</th>
<th align="center">sep.</th>
<th align="center">oct.</th>
<th align="center">nov.</th>
<th align="center">déc.</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">Abondance</td>
<td align="center"><img src="vache.png" height="20" width="20" alt="vache"></td>
<td align="center"><img src="france.png" height="20" width="20" alt="france"></td>
<td><div class="square_empty"></div></td><!-- janvier -->
<td><div class="square_empty"></div></td><!-- fevrier -->
<td><div class="square_empty"></div></td><!-- mars -->
<td><div class="square_empty"></div></td><!-- avril -->
<td><div class="square_empty"></div></td><!-- mai -->
<td><div class="square_full"></div></td><!-- juin -->
<td><div class="square_full"></div></td><!-- juillet -->
<td><div class="square_full"></div></td><!-- aout -->
<td><div class="square_full"></div></td><!-- septembre -->
<td><div class="square_full"></div></td><!-- octobre -->
<td><div class="square_full"></div></td><!-- novembre -->
<td><div class="square_full"></div></td><!-- decembre -->
</tr>
<tr>
<td align="center">Banon</td>
<td align="center"><img src="chevre.png" height="20" width="20" alt="chevre"></td>
<td align="center"><img src="france.png" height="20" width="20" alt="france"></td>
<td><div class="square_full"></div></td><!-- janvier -->
<td><div class="square_full"></div></td><!-- fevrier -->
<td><div class="square_full"></div></td><!-- mars -->
<td><div class="square_full"></div></td><!-- avril -->
<td><div class="square_full"></div></td><!-- mai -->
<td><div class="square_full"></div></td><!-- juin -->
<td><div class="square_full"></div></td><!-- juillet -->
<td><div class="square_full"></div></td><!-- aout -->
<td><div class="square_full"></div></td><!-- septembre -->
<td><div class="square_full"></div></td><!-- octobre -->
<td><div class="square_full"></div></td><!-- novembre -->
<td><div class="square_full"></div></td><!-- decembre -->
</tr>
<tr>
<td align="center">Beaufort</td>
<td align="center"><img src="vache.png" height="20" width="20" alt="vache"></td>
<td align="center"><img src="suisse.png" height="20" width="20" alt="suisse"></td>
<td><div class="square_empty"></div></td><!-- janvier -->
<td><div class="square_empty"></div></td><!-- fevrier -->
<td><div class="square_empty"></div></td><!-- mars -->
<td><div class="square_full"></div></td><!-- avril -->
<td><div class="square_full"></div></td><!-- mai -->
<td><div class="square_full"></div></td><!-- juin -->
<td><div class="square_full"></div></td><!-- juillet -->
<td><div class="square_full"></div></td><!-- aout -->
<td><div class="square_full"></div></td><!-- septembre -->
<td><div class="square_empty"></div></td><!-- octobre -->
<td><div class="square_empty"></div></td><!-- novembre -->
<td><div class="square_empty"></div></td><!-- decembre -->
</tr>
<tr>
<td align="center">Bleu d'Auvergne</td>
<td align="center"><img src="vache.png" height="20" width="20" alt="vache"></td>
<td align="center"><img src="france.png" height="20" width="20" alt="france"></td>
<td><div class="square_empty"></div></td><!-- janvier -->
<td><div class="square_empty"></div></td><!-- fevrier -->
<td><div class="square_empty"></div></td><!-- mars -->
<td><div class="square_empty"></div></td><!-- avril -->
<td><div class="square_empty"></div></td><!-- mai -->
<td><div class="square_full"></div></td><!-- juin -->
<td><div class="square_full"></div></td><!-- juillet -->
<td><div class="square_full"></div></td><!-- aout -->
<td><div class="square_full"></div></td><!-- septembre -->
<td><div class="square_full"></div></td><!-- octobre -->
<td><div class="square_full"></div></td><!-- novembre -->
<td><div class="square_full"></div></td><!-- decembre -->
</tr>
<tr>
<td align="center">Bleu de Gex</td>
<td align="center"><img src="vache.png" height="20" width="20" alt="vache"></td>
<td align="center"><img src="france.png" height="20" width="20" alt="france"></td>
<td><div class="square_full"></div></td><!-- janvier -->
<td><div class="square_full"></div></td><!-- fevrier -->
<td><div class="square_empty"></div></td><!-- mars -->
<td><div class="square_empty"></div></td><!-- avril -->
<td><div class="square_empty"></div></td><!-- mai -->
<td><div class="square_full"></div></td><!-- juin -->
<td><div class="square_full"></div></td><!-- juillet -->
<td><div class="square_full"></div></td><!-- aout -->
<td><div class="square_full"></div></td><!-- septembre -->
<td><div class="square_full"></div></td><!-- octobre -->
<td><div class="square_full"></div></td><!-- novembre -->
<td><div class="square_full"></div></td><!-- decembre -->
</tr>
<tr>
<td align="center">Chabichou du Poitou</td>
<td align="center"><img src="chevre.png" height="20" width="20" alt="chevre"></td>
<td align="center"><img src="france.png" height="20" width="20" alt="france"></td>
<td><div class="square_empty"></div></td><!-- janvier -->
<td><div class="square_empty"></div></td><!-- fevrier -->
<td><div class="square_empty"></div></td><!-- mars -->
<td><div class="square_empty"></div></td><!-- avril -->
<td><div class="square_empty"></div></td><!-- mai -->
<td><div class="square_full"></div></td><!-- juin -->
<td><div class="square_full"></div></td><!-- juillet -->
<td><div class="square_full"></div></td><!-- aout -->
<td><div class="square_full"></div></td><!-- septembre -->
<td><div class="square_full"></div></td><!-- octobre -->
<td><div class="square_full"></div></td><!-- novembre -->
<td><div class="square_empty"></div></td><!-- decembre -->
</tr>
</tbody>
</table>
</body>
</html>Please try with this
$(document).ready(function() {
$("#tableA").tablesorter({
sortList: [[0,0]],
textExtraction:function(s1){
if($(s1).children('div').html() === "") return $(s1).children('div').attr('class');else if($(s1).find('img').length == 0) return $(s1).text(); else return $(s1).find('img').attr('alt');}
//textExtraction:function(s2){ if($(s2).find('div').length == 0) return $(s2).text(); else return $(s2).find('div').attr('class');}
});
});