Sorteren op alfabet

Auteur: JQUERY - 27 augustus 2009 - 17:54 - Gekeurd door: Koen - Hits: 5646 - Aantal punten: 4.00 (3 stemmen)

Hallo allemaal!
Ik ben een website aan het maken dat je game kan opzoeken en nu heb ik een systeem waarbij dat kan: JQUERY . De onderstaande code is een aanpassing van de standaard code. Files zijn hier te downloaden: http://game.pivotroarmovies.com/sort/sort.zip

P.S. Dit script is trouwens niet van mij het is van JQUERY, ik heb het alleen aangepast.

*Update: Versie 1.1.3*
-Datum wordt correct gesorteerd.

Code:

Het enigste wat je moet doen is een nieuw html document te maken met het volgende:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Sorteerder v 1.1</title>
	<link rel="stylesheet" href="/css/jq.css" type="text/css" media="print, projection, screen" />
	<link rel="stylesheet" href="/css/style.css" type="text/css" media="print, projection, screen" />
	<script type="text/javascript" src="/jquery-latest.js"></script>
	<script type="text/javascript" src="/jquery.tablesorter.js"></script>
	<script type="text/javascript" src="/docs/js/chili/chili-1.8b.js"></script>

	<script type="text/javascript" src="js/docs.js"></script>
	<script type="text/javascript">
	$(function() {		
		$("#tablesorter-demo").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
		$("#options").tablesorter({sortList: [[0,0]], headers: { 3:{sorter: false}, 4:{sorter: false}}});
	});	
	</script>
<table id="tablesorter-demo" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
		<thead>

			<tr>
				<th>Naam Game</th>
				<th>Genre</th>
				<th>Leeftijd</th>
				<th>Datum uitgave</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Game A</td>
				<td>Genre A</td>
				<td>Leeftijd A</td>
				<td>Datum A</td>

			</tr>
			<tr>
			        <td>Game B</td>
				<td>Genre B</td>
				<td>Leeftijd B</td>
				<td>Datum B</td>
			</tr>
			<tr>
				<td>Game C</td>
				<td>Genre C</td>
				<td>Leeftijd C</td>
				<td>Datum C</td>
			</tr>
			<tr>
				<td>Game D</td>
				<td>Genre D</td>
				<td>Leeftijd D</td>
				<td>Datum D</td>
			</tr>
			<tr>
				<td>Game E</td>
				<td>Genre E</td>
				<td>Leeftijd E</td>
				<td>Datum E</td>
			</tr>
		</tbody>
	</table>

</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Sorteerder v 1.1</title>
	<link rel="stylesheet" href="/css/jq.css" type="text/css" media="print, projection, screen" />
	<link rel="stylesheet" href="/css/style.css" type="text/css" media="print, projection, screen" />
	<script type="text/javascript" src="/jquery-latest.js"></script>
	<script type="text/javascript" src="/jquery.tablesorter.js"></script>
	<script type="text/javascript" src="/docs/js/chili/chili-1.8b.js"></script>
 
	<script type="text/javascript" src="js/docs.js"></script>
	<script type="text/javascript">
	$(function() {		
		$("#tablesorter-demo").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
		$("#options").tablesorter({sortList: [[0,0]], headers: { 3:{sorter: false}, 4:{sorter: false}}});
	});	
	</script>
<table id="tablesorter-demo" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
		<thead>
 
			<tr>
				<th>Naam Game</th>
				<th>Genre</th>
				<th>Leeftijd</th>
				<th>Datum uitgave</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Game A</td>
				<td>Genre A</td>
				<td>Leeftijd A</td>
				<td>Datum A</td>
 
			</tr>
			<tr>
			        <td>Game B</td>
				<td>Genre B</td>
				<td>Leeftijd B</td>
				<td>Datum B</td>
			</tr>
			<tr>
				<td>Game C</td>
				<td>Genre C</td>
				<td>Leeftijd C</td>
				<td>Datum C</td>
			</tr>
			<tr>
				<td>Game D</td>
				<td>Genre D</td>
				<td>Leeftijd D</td>
				<td>Datum D</td>
			</tr>
			<tr>
				<td>Game E</td>
				<td>Genre E</td>
				<td>Leeftijd E</td>
				<td>Datum E</td>
			</tr>
		</tbody>
	</table>
 
</body>
</html>

De onderstaande dingen zijn te downloaden op http://game.pivotroarmovies.com/sort/sort.zip (zie ook link onderaan pagina):

-/css/jq.css
-/css/style.css
-/jquery-latest.js
-/jquery.tablesorter.js
-/js/chili-1.8b.js
-/js/docs.js

Download code (.txt)

Stemmen

Niet ingelogd.

Reacties

Post een reactie

Geen reacties (0)