Oz Web Services
  • Home
  • WP
  • PHP
  • JS
  • CSS
  • SCSS
  • HTML
  • XML
  • JSON
  • SQL
  • .htaccess
  • Apache
  • Nginx
  • INI
  • HTTP
  • Diff
Search shortcode

jQuery UI: Sortable (HTML)

<h1>Sorting A Table With jQuery UI</h1>
<table id="sort" class="grid" title="Kurt Vonnegut novels">
	<thead>
		<tr><th class="index">No.</th><th>Year</th><th>Title</th><th>Grade</th></tr>
	</thead>
	<tbody>
		<tr><td class="index">1</td><td>1969</td><td>Slaughterhouse-Five</td><td>A+</td></tr>
		<tr><td class="index">2</td><td>1952</td><td>Player Piano</td><td>B</td></tr>
		<tr><td class="index">3</td><td>1963</td><td>Cat's Cradle</td><td>A+</td></tr>
		<tr><td class="index">4</td><td>1973</td><td>Breakfast of Champions</td><td>C</td></tr>
		<tr><td class="index">5</td><td>1965</td><td>God Bless You, Mr. Rosewater</td><td>A</td></tr>
	</tbody>
</table>


Example: HTML

<!DOCTYPE html>
<html>
<head>
<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
jQuery(document).ready(function($){
	function init() {
		return true;
	}
	keyword.each(function( i,e ){
		// console.log('here');
		if ( $(this).text() == 'var' ) {
			$(this).html( '<span class="var">var</span>' )
		}
	});
});
</script>
</head>
<body>
	<p checked class="title" id='title'>Title</p>
	<!-- here goes the rest of the page -->
</body>
</html>
Oz Web Services
Copyright © 2015-2023 All Rights Reserved