jquery tablesorter - извлечение текста с изображением и div - PullRequest
Новая
       14

jquery tablesorter - извлечение текста с изображением и div

0 голосов
/ 07 сентября 2018

Я использую jquery tablesorter и хочу отсортировать контент. Некоторые из моих клеток содержат изображения, а другие div.

С textExtraction я могу сортировать их по изображениям или div. Я добавляю две функции в части js: первая для изображений, вторая для div.

Как я могу использовать их обоих? Я хочу, чтобы функция сортировала мою таблицу по изображениям и 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="http://cocktaildata.fr/GIS/PY/graph/liste/jquery.tablesorter.js"></script>
      <link rel="stylesheet" type="text/css" href="http://cocktaildata.fr/GIS/PY/graph/liste/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="http://cocktaildata.fr/GIS/PY/graph/liste/vache.png" height="20" width="20" alt="vache"></td>
    			<td align="center"><img src="http://cocktaildata.fr/GIS/PY/graph/liste/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="http://cocktaildata.fr/GIS/PY/graph/liste/chevre.png" height="20" width="20" alt="chevre"></td>
    			<td align="center"><img src="http://cocktaildata.fr/GIS/PY/graph/liste/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="http://cocktaildata.fr/GIS/PY/graph/liste/vache.png" height="20" width="20" alt="vache"></td>
    			<td align="center"><img src="http://cocktaildata.fr/GIS/PY/graph/liste/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="http://cocktaildata.fr/GIS/PY/graph/liste/vache.png" height="20" width="20" alt="vache"></td>
    			<td align="center"><img src="http://cocktaildata.fr/GIS/PY/graph/liste/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="http://cocktaildata.fr/GIS/PY/graph/liste/vache.png" height="20" width="20" alt="vache"></td>
    			<td align="center"><img src="http://cocktaildata.fr/GIS/PY/graph/liste/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="http://cocktaildata.fr/GIS/PY/graph/liste/chevre.png" height="20" width="20" alt="chevre"></td>
    			<td align="center"><img src="http://cocktaildata.fr/GIS/PY/graph/liste/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>

1 Ответ

0 голосов
/ 07 сентября 2018 
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');}
                });     
            });

Демо https://codepen.io/pixel-lab/pen/WgXRRV

...