backend/opacity/table_datatables.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>DataTables // Opacity Admin</title>

	<!-- Default Styles (DO NOT TOUCH) -->
	<link rel="stylesheet" href="lib/css/font-awesome.min.css">
	<link rel="stylesheet" href="lib/css/bootstrap.min.css">
	<link rel="stylesheet" href="lib/css/fonts.css">
	<link rel="stylesheet" href="lib/css/opacity-admin.css"/>

	<!-- Adjustable Styles -->
	<link rel="stylesheet" href="lib/css/DT_bootstrap.css">

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<script src="lib/js/respond.min.js"></script>
	<![endif]-->

</head>
<body>

	<div class="contain">

		<div class="left hidden-xs">
			<div class="sidebar">
				<input class="typeahead" type="text" placeholder=""><span id="search-icon" class="glyphicon glyphicon-search"></span>
				<div class="accordion">
					<div class="accordion-group"><div class="accordion-heading"><a class="sbtn" href="index.html"><span class="fa fa-dashboard"></span><span class="full">Dashboard</span></a></div></div>
					<div class="accordion-group"><div class="accordion-heading"><a class="sbtn" href="composition.html"><span class="fa fa-font"></span><span class="full">Composition</span></a></div></div>
					<div class="accordion-group"><div class="accordion-heading"><a class="sbtn" href="charts.html"><span class="fa fa-bar-chart-o"></span><span class="full">Charts</span><span class="label label-primary">8</span></a></div></div>
					<div class="accordion-group"><div class="accordion-heading"><a class="sbtn" href="widgets.html"><span class="fa fa-list-alt"></span><span class="full">Widgets</span></a></div></div>
					<div class="accordion-group">
					 <div class="accordion-heading"><a class="sbtn" data-toggle="collapse" href="#c-ui"><span class="icon icon-credit-card"></span><span class="full">UI Elements</span><span class="caret"></span></a></div>
					 <div id="c-ui" class="accordion-body collapse"><div class="accordion-inner">
					  <a href="general.html" class="sbtn">General</a>
					  <a href="buttons.html" class="sbtn">Buttons</a>
					  <a href="notifications.html" class="sbtn">Notifications</a>
					  <a href="icons.html" class="sbtn">Icons</a> 
					 </div></div>
					</div>
					<div class="accordion-group">
					 <div class="accordion-heading"><a class="sbtn" data-toggle="collapse" href="#c-forms"><span class="fa fa-pencil-square-o"></span><span class="full">Forms</span><span class="caret"></span></a></div>
					 <div id="c-forms" class="accordion-body collapse"><div class="accordion-inner">
					  <a href="form_elements.html" class="sbtn">Form Elements</a>
					  <a href="form_example.html" class="sbtn">Form Examples</a>
					  <a href="form_validation.html" class="sbtn">Form Validation</a>
					 </div></div>
					</div>
					<div class="accordion-group">
					 <div class="accordion-heading"><a class="sbtn" data-toggle="collapse" href="#c-tables"><span class="fa fa-table"></span><span class="full">Tables</span><span class="caret"></span></a></div>
					 <div id="c-tables" class="accordion-body collapse"><div class="accordion-inner">
					  <a href="table_static.html" class="sbtn"><span class="icon icon-th-large"></span>Static Tables</a>
					  <a href="table_datatables.html" class="sbtn"><span class="fa fa-table"></span>jQuery Datatables</a> 
					 </div></div>
					</div>
					<div class="accordion-group"><div class="accordion-heading"><a class="sbtn" href="gallery.html"><span class="fa fa-picture-o"></span><span class="full">Gallery</span><span class="label label-success">7</span></a></div></div>
					<div class="accordion-group"><div class="accordion-heading"><a class="sbtn" href="storyboard.html"><span class="fa fa-tasks"></span><span class="full">Storyboard</span></a></div></div>
					<div class="accordion-group"><div class="accordion-heading"><a class="sbtn" href="calendar.html"><span class="fa fa-calendar"></span><span class="full">Calendar</span><span class="label label-danger">5</span></a></div></div>
					<div class="accordion-group"><div class="accordion-heading"><a class="sbtn" href="maps.html"><span class="fa fa-map-marker"></span><span class="full">Maps</span></a></div></div>
					<div class="accordion-group">
					 <div class="accordion-heading"><a class="sbtn" data-toggle="collapse" href="#c-business"><span class="fa fa-building-o"></span><span class="full">Business</span><span class="caret"></span></a></div>
					 <div id="c-business" class="accordion-body collapse"><div class="accordion-inner">
					  <a href="pricing.html" class="sbtn">Pricing</a>
					  <a href="invoice.html" class="sbtn">Invoice</a>
					 </div></div>
					</div>
					<div class="accordion-group">
					 <div class="accordion-heading"><a class="sbtn" data-toggle="collapse" href="#c-pages"><span class="fa fa-file-o"></span><span class="full">Pages</span><span class="caret"></span></a></div>
					 <div id="c-pages" class="accordion-body collapse"><div class="accordion-inner">
					  <a href="login.html" class="sbtn">Login</a>
					  <a href="support.html" class="sbtn">Support</a>
					  <a href="grid.html" class="sbtn">Grid</a>
					  <a href="404.html" class="sbtn">404 Error</a> 
					 </div></div>
					</div>
				</div>
			</div>
		</div>

		<div class="right">

			<div class="col-md-12">
				<div class="logo"><img id="logo" src="lib/img/logo3.png"></div>
				<div class="logoxs"><img id="logo" src="lib/img/logo_sm.png"></div>
				<div class="nav">
					<div class="hov">
						<div class="btn-group">
							<a class="con" href="" data-toggle="dropdown"><span class="fa fa-bell"></span></a>
							<div class="dropdown-menu pull-right" role="menu">
								<div class="drop-item">
									<div class="drop-icon font-danger"><span class="fa fa-tachometer"></span></div>
									<div class="drop-info">
										<div class="drop-content">Phasellus tincidunt tincidunt velit shal...</div>
										<div class="drop-description">Bandwidth</div>
										<div class="drop-time">1/31 1:37 PM</div>
									</div>
								</div>
								<div class="drop-item">
									<div class="drop-icon font-success"><span class="fa fa-shopping-cart"></span></div>
									<div class="drop-info">
										<div class="drop-content">Ut tempus eros massa ut dolor, aenan...</div>
										<div class="drop-description">Purchase</div>
										<div class="drop-time">1/31 11:24 AM</div>
									</div>
								</div>
								<div class="drop-item">
									<div class="drop-icon font-warning"><span class="fa fa-laptop"></span></div>
									<div class="drop-info">
										<div class="drop-content">Aliquet fringilla sem. Suspendisse velit...</div>
										<div class="drop-description">Server</div>
										<div class="drop-time">1/31 6:07 AM</div>
									</div>
								</div>
								<div class="drop-item">
									<div class="drop-icon font-info"><span class="fa fa-info-circle"></span></div>
									<div class="drop-info">
										<div class="drop-content">Dolor ut eros velite sem shal tempetus...</div>
										<div class="drop-description">Statistics</div>
										<div class="drop-time">1/30 9:46 PM</div>
									</div>
								</div>
								<div class="drop-item drop-footer">
									<div class="drop-info">
										<div class="drop-description">See all of the current alerts...</div>
										<div class="drop-time"><span class="fa fa-angle-double-right"></span></div>
									</div>
								</div>
							</div>
						</div>
						<div class="btn-group">
							<a class="con" href="" data-toggle="dropdown"><span class="fa fa-envelope"></span></a>
							<div class="dropdown-menu pull-right" role="menu">
								<div class="drop-item">
									<div class="drop-icon font-unread"><span class="fa fa-envelope-o"></span></div>
									<div class="drop-info">
										<div class="drop-content">Phasellus tincidunt tincidunt velit shal...</div>
										<div class="drop-description">Angela Johnson</div>
										<div class="drop-time">1/31 1:37 PM</div>
									</div>
								</div>
								<div class="drop-item">
									<div class="drop-icon font-unread"><span class="fa fa-envelope-o"></span></div>
									<div class="drop-info">
										<div class="drop-content">Ut tempus eros massa ut dolor, aenan...</div>
										<div class="drop-description">Steve Parsons</div>
										<div class="drop-time">1/31 11:24 AM</div>
									</div>
								</div>
								<div class="drop-item">
									<div class="drop-icon font-read"><span class="fa fa-envelope-o"></span></div>
									<div class="drop-info">
										<div class="drop-content">Aliquet fringilla sem. Suspendisse velit...</div>
										<div class="drop-description">Sam Wise</div>
										<div class="drop-time">1/31 6:07 AM</div>
									</div>
								</div>
								<div class="drop-item">
									<div class="drop-icon font-read"><span class="fa fa-envelope-o"></span></div>
									<div class="drop-info">
										<div class="drop-content">Dolor ut eros velite sem shal tempetus...</div>
										<div class="drop-description">Tim Bolton</div>
										<div class="drop-time">1/30 9:46 PM</div>
									</div>
								</div>
								<div class="drop-item">
									<div class="drop-icon font-read"><span class="fa fa-envelope-o"></span></div>
									<div class="drop-info">
										<div class="drop-content">Sitel velit shal sem ut dolor massa tule...</div>
										<div class="drop-description">Tim Bolton</div>
										<div class="drop-time">1/30 9:46 PM</div>
									</div>
								</div>
								<div class="drop-item drop-footer">
									<div class="drop-info">
										<div class="drop-description">See all of your messages...</div>
										<div class="drop-time"><span class="fa fa-angle-double-right"></span></div>
									</div>
								</div>
							</div>
						</div>
						<div class="btn-group">
							<a class="con" href="" data-toggle="dropdown"><span class="fa fa-user"></span></a>
							<ul class="dropdown-menu pull-right" role="menu">
								<li class="profile">
									<div class="pic"><img src="lib/img/avatars/2.png"></div>
									<div class="profile-info">
										Jeffrey
										<br><a href="#">Profile</a> - <a href="#">Settings</a>
									</div>
								</li>
								<li class="linked"><a href="#"><span class="fa fa-envelope-o"></span>Messages</a></li>
								<li class="linked"><a href="#"><span class="fa fa-bell-o"></span>Notifications</a></li>
								<li class="linked"><a href="#"><span class="fa fa-calendar"></span>Tasks/Events</a></li>
								<li class="linked bottom"><a href="#"><span class="fa fa-reply"></span>Logout</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
    
			<!-- BEGIN PAGE CONTENT -->
			<div class="content">

				<!-- BREADCRUMBS -->
				<div id="bread" class="col-md-12">
					<div class="crumbs">
						<ol class="breadcrumb">
							<li><i class="fa fa-home"></i> <a href="#">Home</a></li>
							<li><i class="fa fa-table"></i><a href="#">Tables</a></li>
							<li class="active">DataTables</li>
						</ol>
					</div>
				</div> 
				<div id="response" class="col-md-12">
					<div class="rep">
						<div style="float:right;" class="hov">
							<div class="btn-group">
								<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown"><span class="fa fa-bars"></span> Navigation <span class="caret"></span></button>
								<ul class="dropdown-menu pull-right" role="menu">
									<li class="linked"><a href="index.html"><span class="fa fa-dashboard"></span><span class="full">Dashboard</span></a></li>
									<li class="linked"><a href="composition.html"><span class="fa fa-font"></span><span class="full">Composition</span></a></li>
									<li class="linked"><a href="charts.html"><span class="fa fa-bar-chart-o"></span><span class="full">Charts</span></a></li>
									<li class="linked"><a href="widgets.html"><span class="fa fa-list-alt"></span><span class="full">Widgets</span></a></li>
									<li class="linked-head"><span class="icon icon-credit-card"></span>UI Elements</li>
									<li class="linked"><a href="general.html">General</a></li>
									<li class="linked"><a href="buttons.html">Buttons</a></li>
									<li class="linked"><a href="notifications.html">Notifications</a></li>
									<li class="linked top"><a href="icons.html">Icons</a></li> 
									<li class="linked-head"><span class="fa fa-pencil-square-o"></span>Forms</li>
									<li class="linked"><a href="form_elements.html">Form Elements</a></li>
									<li class="linked"><a href="form_example.html">Form Examples</a></li>
									<li class="linked top"><a href="form_validation.html">Form Validation</a></li>
									<li class="linked-head"><span class="fa fa-table"></span>Tables</li>
									<li class="linked"><a href="table_static.html"><span class="icon icon-th-large"></span>Static Tables</a></li>
									<li class="linked"><a href="table_datatables.html"><span class="fa fa-table"></span>jQuery Datatables</a></li> 
									<li class="linked"><a href="gallery.html"><span class="fa fa-picture-o"></span><span class="full">Gallery</span></a></li>
									<li class="linked"><a href="storyboard.html"><span class="fa fa-tasks"></span><span class="full">Storyboard</span></a></li>
									<li class="linked"><a href="calendar.html"><span class="fa fa-calendar"></span><span class="full">Calendar</span></a></li>
									<li class="linked top"><a href="maps.html"><span class="fa fa-map-marker"></span><span class="full">Maps</span></a></li>
									<li class="linked-head"><span class="fa fa-building-o"></span>Business</li>
									<li class="linked"><a href="pricing.html">Pricing</a></li>
									<li class="linked top"><a href="invoice.html">Invoice</a></li>
									<li class="linked-head"><span class="fa fa-file-o"></span>Pages</li>
									<li class="linked"><a href="login.html">Login</a></li>
									<li class="linked"><a href="support.html">Support</a></li>
									<li class="linked"><a href="grid.html">Grid</a></li>
									<li class="linked"><a href="404.html">404 Error</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
     
				<div class="col-md-12">
					<div class="wdgt wdgt-primary">
						<div class="wdgt-header"><i class="fa fa-table"></i>DataTables</div>
						<div class="wdgt-body">
							<table cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped" id="example">
								<thead>
									<tr>
										<th>Rendering engine</th>
										<th>Browser</th>
										<th>Platform(s)</th>
										<th>Engine version</th>
										<th>CSS grade</th>
									</tr>
								</thead>
								<tbody>
									<tr class="odd gradeX">
										<td>Trident</td>
										<td>Internet Explorer 4.0</td>
										<td>Win 95+</td>
										<td class="center"> 4</td>
										<td class="center">X</td>
									</tr>
									<tr class="even gradeC">
										<td>Trident</td>
										<td>Internet Explorer 5.0</td>
										<td>Win 95+</td>
										<td class="center">5</td>
										<td class="center">C</td>
									</tr>
									<tr class="odd gradeA">
										<td>Trident</td>
										<td>Internet Explorer 5.5</td>
										<td>Win 95+</td>
										<td class="center">5.5</td>
										<td class="center">A</td>
									</tr>
									<tr class="even gradeA">
										<td>Trident</td>
										<td>Internet Explorer 6</td>
										<td>Win 98+</td>
										<td class="center">6</td>
										<td class="center">A</td>
									</tr>
									<tr class="odd gradeA">
										<td>Trident</td>
										<td>Internet Explorer 7</td>
										<td>Win XP SP2+</td>
										<td class="center">7</td>
										<td class="center">A</td>
									</tr>
									<tr class="even gradeA">
										<td>Trident</td>
										<td>AOL browser (AOL desktop)</td>
										<td>Win XP</td>
										<td class="center">6</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Firefox 1.0</td>
										<td>Win 98+ / OSX.2+</td>
										<td class="center">1.7</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Firefox 1.5</td>
										<td>Win 98+ / OSX.2+</td>
										<td class="center">1.8</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Firefox 2.0</td>
										<td>Win 98+ / OSX.2+</td>
										<td class="center">1.8</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Firefox 3.0</td>
										<td>Win 2k+ / OSX.3+</td>
										<td class="center">1.9</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Camino 1.0</td>
										<td>OSX.2+</td>
										<td class="center">1.8</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Camino 1.5</td>
										<td>OSX.3+</td>
										<td class="center">1.8</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Netscape 7.2</td>
										<td>Win 95+ / Mac OS 8.6-9.2</td>
										<td class="center">1.7</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Netscape Browser 8</td>
										<td>Win 98SE+</td>
										<td class="center">1.7</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Netscape Navigator 9</td>
										<td>Win 98+ / OSX.2+</td>
										<td class="center">1.8</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Mozilla 1.0</td>
										<td>Win 95+ / OSX.1+</td>
										<td class="center">1</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Mozilla 1.1</td>
										<td>Win 95+ / OSX.1+</td>
										<td class="center">1.1</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Mozilla 1.2</td>
										<td>Win 95+ / OSX.1+</td>
										<td class="center">1.2</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Mozilla 1.3</td>
										<td>Win 95+ / OSX.1+</td>
										<td class="center">1.3</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Mozilla 1.4</td>
										<td>Win 95+ / OSX.1+</td>
										<td class="center">1.4</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Mozilla 1.5</td>
										<td>Win 95+ / OSX.1+</td>
										<td class="center">1.5</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Mozilla 1.6</td>
										<td>Win 95+ / OSX.1+</td>
										<td class="center">1.6</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Mozilla 1.7</td>
										<td>Win 98+ / OSX.1+</td>
										<td class="center">1.7</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Mozilla 1.8</td>
										<td>Win 98+ / OSX.1+</td>
										<td class="center">1.8</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Seamonkey 1.1</td>
										<td>Win 98+ / OSX.2+</td>
										<td class="center">1.8</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Gecko</td>
										<td>Epiphany 2.20</td>
										<td>Gnome</td>
										<td class="center">1.8</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Webkit</td>
										<td>Safari 1.2</td>
										<td>OSX.3</td>
										<td class="center">125.5</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Webkit</td>
										<td>Safari 1.3</td>
										<td>OSX.3</td>
										<td class="center">312.8</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Webkit</td>
										<td>Safari 2.0</td>
										<td>OSX.4+</td>
										<td class="center">419.3</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Webkit</td>
										<td>Safari 3.0</td>
										<td>OSX.4+</td>
										<td class="center">522.1</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Webkit</td>
										<td>OmniWeb 5.5</td>
										<td>OSX.4+</td>
										<td class="center">420</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Webkit</td>
										<td>iPod Touch / iPhone</td>
										<td>iPod</td>
										<td class="center">420.1</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Webkit</td>
										<td>S60</td>
										<td>S60</td>
										<td class="center">413</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Presto</td>
										<td>Opera 7.0</td>
										<td>Win 95+ / OSX.1+</td>
										<td class="center">-</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Presto</td>
										<td>Opera 7.5</td>
										<td>Win 95+ / OSX.2+</td>
										<td class="center">-</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Presto</td>
										<td>Opera 8.0</td>
										<td>Win 95+ / OSX.2+</td>
										<td class="center">-</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Presto</td>
										<td>Opera 8.5</td>
										<td>Win 95+ / OSX.2+</td>
										<td class="center">-</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Presto</td>
										<td>Opera 9.0</td>
										<td>Win 95+ / OSX.3+</td>
										<td class="center">-</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Presto</td>
										<td>Opera 9.2</td>
										<td>Win 88+ / OSX.3+</td>
										<td class="center">-</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Presto</td>
										<td>Opera 9.5</td>
										<td>Win 88+ / OSX.3+</td>
										<td class="center">-</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Presto</td>
										<td>Opera for Wii</td>
										<td>Wii</td>
										<td class="center">-</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Presto</td>
										<td>Nokia N800</td>
										<td>N800</td>
										<td class="center">-</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>Presto</td>
										<td>Nintendo DS browser</td>
										<td>Nintendo DS</td>
										<td class="center">8.5</td>
										<td class="center">C/A<sup>1</sup></td>
									</tr>
									<tr class="gradeC">
										<td>KHTML</td>
										<td>Konqureror 3.1</td>
										<td>KDE 3.1</td>
										<td class="center">3.1</td>
										<td class="center">C</td>
									</tr>
									<tr class="gradeA">
										<td>KHTML</td>
										<td>Konqureror 3.3</td>
										<td>KDE 3.3</td>
										<td class="center">3.3</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeA">
										<td>KHTML</td>
										<td>Konqureror 3.5</td>
										<td>KDE 3.5</td>
										<td class="center">3.5</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeX">
										<td>Tasman</td>
										<td>Internet Explorer 4.5</td>
										<td>Mac OS 8-9</td>
										<td class="center">-</td>
										<td class="center">X</td>
									</tr>
									<tr class="gradeC">
										<td>Tasman</td>
										<td>Internet Explorer 5.1</td>
										<td>Mac OS 7.6-9</td>
										<td class="center">1</td>
										<td class="center">C</td>
									</tr>
									<tr class="gradeC">
										<td>Tasman</td>
										<td>Internet Explorer 5.2</td>
										<td>Mac OS 8-X</td>
										<td class="center">1</td>
										<td class="center">C</td>
									</tr>
									<tr class="gradeA">
										<td>Misc</td>
										<td>NetFront 3.1</td>
										<td>Embedded devices</td>
										<td class="center">-</td>
										<td class="center">C</td>
									</tr>
									<tr class="gradeA">
										<td>Misc</td>
										<td>NetFront 3.4</td>
										<td>Embedded devices</td>
										<td class="center">-</td>
										<td class="center">A</td>
									</tr>
									<tr class="gradeX">
										<td>Misc</td>
										<td>Dillo 0.8</td>
										<td>Embedded devices</td>
										<td class="center">-</td>
										<td class="center">X</td>
									</tr>
									<tr class="gradeX">
										<td>Misc</td>
										<td>Links</td>
										<td>Text only</td>
										<td class="center">-</td>
										<td class="center">X</td>
									</tr>
									<tr class="gradeX">
										<td>Misc</td>
										<td>Lynx</td>
										<td>Text only</td>
										<td class="center">-</td>
										<td class="center">X</td>
									</tr>
									<tr class="gradeC">
										<td>Misc</td>
										<td>IE Mobile</td>
										<td>Windows Mobile 6</td>
										<td class="center">-</td>
										<td class="center">C</td>
									</tr>
									<tr class="gradeC">
										<td>Misc</td>
										<td>PSP browser</td>
										<td>PSP</td>
										<td class="center">-</td>
										<td class="center">C</td>
									</tr>
									<tr class="gradeU">
										<td>Other browsers</td>
										<td>All others</td>
										<td>-</td>
										<td class="center">-</td>
										<td class="center">U</td>
									</tr>
								</tbody>
							</table>

						</div>
					</div>
				</div>

 			</div>
 			<!-- END PAGE CONTENT -->

		</div>

	</div>

	<!-- Default JS (DO NOT TOUCH) -->
	<script src="lib/js/jquery.min.js"></script>
	<script src="lib/js/jquery-ui.min.js"></script>
	<script src="lib/js/bootstrap.min.js"></script>
	<script src="lib/js/opacity.widgets.min.js"></script>
	<script src="lib/js/hogan.min.js"></script>
	<script src="lib/js/typeahead.min.js"></script>
	<script src="lib/js/typeahead-example.js"></script>
 
	<!-- Adjustable JS -->
	<script src="lib/js/jquery.dataTables.min.js"></script>
	<script src="lib/js/DT_bootstrap.js"></script>
	<script>
	$(document).ready(function() {

		$('a[href="table_datatables.html"]').addClass('active').parent().parent().addClass('in');

		$('.datatable').dataTable({ "sPaginationType": "bs_normal" });

		$('.datatable').each(function(){
			var datatable = $(this);
			var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
			search_input.attr('placeholder', 'Search');
			search_input.addClass('form-control input-sm');
			var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
			length_sel.addClass('form-control input-sm');
			datatable.bind('page', function(e){
				window.console && console.log('pagination event:', e) 
			});
		});

	});
	</script>

</body>
</html>