rooty/DataTables
1
0
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2025-02-19 17:54:14 +01:00
Code Issues Releases Activity

Examples: Add latest example files from the src repo

Browse Source
This commit is contained in:
Allan Jardine 2014-02-04 10:54:36 +00:00
parent 7cea7a64b4
commit b41927de61
11 changed files with 2434 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

631
examples/ajax/data/orthogonal.txt Normal file
View File

@ -0,0 +1,631 @@
{
"data": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": {
"display": "Mon 25th Apr 11",
"timestamp": "1303682400"
},
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": {
"display": "Mon 25th Jul 11",
"timestamp": "1311544800"
},
"office": "Edinburgh",
"extn": "8422"
},
{
"name": "Ashton Cox",
"position": "Technical Author",
"salary": "$4,800",
"start_date": {
"display": "Mon 12th Jan 09",
"timestamp": "1231714800"
},
"office": "San Francisco",
"extn": "1562"
},
{
"name": "Cedric Kelly",
"position": "Javascript Developer",
"salary": "$3,600",
"start_date": {
"display": "Thu 29th Mar 12",
"timestamp": "1332972000"
},
"office": "Edinburgh",
"extn": "6224"
},
{
"name": "Jenna Elliott",
"position": "Financial Controller",
"salary": "$5,300",
"start_date": {
"display": "Fri 28th Nov 08",
"timestamp": "1227826800"
},
"office": "Edinburgh",
"extn": "5407"
},
{
"name": "Brielle Williamson",
"position": "Integration Specialist",
"salary": "$4,525",
"start_date": {
"display": "Sun 2nd Dec 12",
"timestamp": "1354402800"
},
"office": "New York",
"extn": "4804"
},
{
"name": "Herrod Chandler",
"position": "Sales Assistant",
"salary": "$4,080",
"start_date": {
"display": "Mon 6th Aug 12",
"timestamp": "1344204000"
},
"office": "San Francisco",
"extn": "9608"
},
{
"name": "Rhona Davidson",
"position": "Integration Specialist",
"salary": "$6,730",
"start_date": {
"display": "Thu 14th Oct 10",
"timestamp": "1287007200"
},
"office": "Edinburgh",
"extn": "6200"
},
{
"name": "Colleen Hurst",
"position": "Javascript Developer",
"salary": "$5,000",
"start_date": {
"display": "Tue 15th Sep 09",
"timestamp": "1252965600"
},
"office": "San Francisco",
"extn": "2360"
},
{
"name": "Sonya Frost",
"position": "Software Engineer",
"salary": "$3,600",
"start_date": {
"display": "Sat 13th Dec 08",
"timestamp": "1229122800"
},
"office": "Edinburgh",
"extn": "1667"
},
{
"name": "Jena Gaines",
"position": "System Architect",
"salary": "$5,000",
"start_date": {
"display": "Fri 19th Dec 08",
"timestamp": "1229641200"
},
"office": "London",
"extn": "3814"
},
{
"name": "Quinn Flynn",
"position": "Financial Controller",
"salary": "$4,200",
"start_date": {
"display": "Sun 3rd Mar 13",
"timestamp": "1362265200"
},
"office": "Edinburgh",
"extn": "9497"
},
{
"name": "Charde Marshall",
"position": "Regional Director",
"salary": "$5,300",
"start_date": {
"display": "Thu 16th Oct 08",
"timestamp": "1224108000"
},
"office": "San Francisco",
"extn": "6741"
},
{
"name": "Haley Kennedy",
"position": "Senior Marketing Designer",
"salary": "$4,800",
"start_date": {
"display": "Tue 18th Dec 12",
"timestamp": "1355785200"
},
"office": "London",
"extn": "3597"
},
{
"name": "Tatyana Fitzpatrick",
"position": "Regional Director",
"salary": "$2,875",
"start_date": {
"display": "Wed 17th Mar 10",
"timestamp": "1268780400"
},
"office": "London",
"extn": "1965"
},
{
"name": "Michael Silva",
"position": "Senior Marketing Designer",
"salary": "$3,750",
"start_date": {
"display": "Tue 27th Nov 12",
"timestamp": "1353970800"
},
"office": "London",
"extn": "1581"
},
{
"name": "Paul Byrd",
"position": "Javascript Developer",
"salary": "$5,000",
"start_date": {
"display": "Wed 9th Jun 10",
"timestamp": "1276034400"
},
"office": "New York",
"extn": "3059"
},
{
"name": "Gloria Little",
"position": "Systems Administrator",
"salary": "$3,120",
"start_date": {
"display": "Fri 10th Apr 09",
"timestamp": "1239314400"
},
"office": "New York",
"extn": "1721"
},
{
"name": "Bradley Greer",
"position": "Software Engineer",
"salary": "$3,120",
"start_date": {
"display": "Sat 13th Oct 12",
"timestamp": "1350079200"
},
"office": "London",
"extn": "2558"
},
{
"name": "Dai Rios",
"position": "System Architect",
"salary": "$4,200",
"start_date": {
"display": "Wed 26th Sep 12",
"timestamp": "1348610400"
},
"office": "Edinburgh",
"extn": "2290"
},
{
"name": "Jenette Caldwell",
"position": "Financial Controller",
"salary": "$4,965",
"start_date": {
"display": "Sat 3rd Sep 11",
"timestamp": "1315000800"
},
"office": "New York",
"extn": "1937"
},
{
"name": "Yuri Berry",
"position": "System Architect",
"salary": "$3,600",
"start_date": {
"display": "Thu 25th Jun 09",
"timestamp": "1245880800"
},
"office": "New York",
"extn": "6154"
},
{
"name": "Caesar Vance",
"position": "Technical Author",
"salary": "$4,965",
"start_date": {
"display": "Mon 12th Dec 11",
"timestamp": "1323644400"
},
"office": "New York",
"extn": "8330"
},
{
"name": "Doris Wilder",
"position": "Sales Assistant",
"salary": "$4,965",
"start_date": {
"display": "Mon 20th Sep 10",
"timestamp": "1284933600"
},
"office": "Edinburgh",
"extn": "3023"
},
{
"name": "Angelica Ramos",
"position": "System Architect",
"salary": "$2,875",
"start_date": {
"display": "Fri 9th Oct 09",
"timestamp": "1255039200"
},
"office": "London",
"extn": "5797"
},
{
"name": "Gavin Joyce",
"position": "Developer",
"salary": "$4,525",
"start_date": {
"display": "Wed 22nd Dec 10",
"timestamp": "1292972400"
},
"office": "Edinburgh",
"extn": "8822"
},
{
"name": "Jennifer Chang",
"position": "Regional Director",
"salary": "$4,080",
"start_date": {
"display": "Sun 14th Nov 10",
"timestamp": "1289689200"
},
"office": "London",
"extn": "9239"
},
{
"name": "Brenden Wagner",
"position": "Software Engineer",
"salary": "$3,750",
"start_date": {
"display": "Tue 7th Jun 11",
"timestamp": "1307397600"
},
"office": "San Francisco",
"extn": "1314"
},
{
"name": "Ebony Grimes",
"position": "Software Engineer",
"salary": "$2,875",
"start_date": {
"display": "Thu 11th Mar 10",
"timestamp": "1268262000"
},
"office": "San Francisco",
"extn": "2947"
},
{
"name": "Russell Chavez",
"position": "Director",
"salary": "$3,600",
"start_date": {
"display": "Sun 14th Aug 11",
"timestamp": "1313272800"
},
"office": "Edinburgh",
"extn": "8899"
},
{
"name": "Michelle House",
"position": "Integration Specialist",
"salary": "$3,750",
"start_date": {
"display": "Thu 2nd Jun 11",
"timestamp": "1306965600"
},
"office": "Edinburgh",
"extn": "2769"
},
{
"name": "Suki Burks",
"position": "Developer",
"salary": "$2,875",
"start_date": {
"display": "Thu 22nd Oct 09",
"timestamp": "1256162400"
},
"office": "London",
"extn": "6832"
},
{
"name": "Prescott Bartlett",
"position": "Technical Author",
"salary": "$6,730",
"start_date": {
"display": "Sat 7th May 11",
"timestamp": "1304719200"
},
"office": "London",
"extn": "3606"
},
{
"name": "Gavin Cortez",
"position": "Technical Author",
"salary": "$6,730",
"start_date": {
"display": "Sun 26th Oct 08",
"timestamp": "1224972000"
},
"office": "San Francisco",
"extn": "2860"
},
{
"name": "Martena Mccray",
"position": "Integration Specialist",
"salary": "$4,080",
"start_date": {
"display": "Wed 9th Mar 11",
"timestamp": "1299625200"
},
"office": "Edinburgh",
"extn": "8240"
},
{
"name": "Unity Butler",
"position": "Senior Marketing Designer",
"salary": "$3,750",
"start_date": {
"display": "Wed 9th Dec 09",
"timestamp": "1260313200"
},
"office": "San Francisco",
"extn": "5384"
},
{
"name": "Howard Hatfield",
"position": "Financial Controller",
"salary": "$4,080",
"start_date": {
"display": "Tue 16th Dec 08",
"timestamp": "1229382000"
},
"office": "San Francisco",
"extn": "7031"
},
{
"name": "Hope Fuentes",
"position": "Financial Controller",
"salary": "$4,200",
"start_date": {
"display": "Fri 12th Feb 10",
"timestamp": "1265929200"
},
"office": "San Francisco",
"extn": "6318"
},
{
"name": "Vivian Harrell",
"position": "System Architect",
"salary": "$4,965",
"start_date": {
"display": "Sat 14th Feb 09",
"timestamp": "1234566000"
},
"office": "San Francisco",
"extn": "9422"
},
{
"name": "Timothy Mooney",
"position": "Financial Controller",
"salary": "$4,200",
"start_date": {
"display": "Thu 11th Dec 08",
"timestamp": "1228950000"
},
"office": "London",
"extn": "7580"
},
{
"name": "Jackson Bradshaw",
"position": "Director",
"salary": "$5,000",
"start_date": {
"display": "Fri 26th Sep 08",
"timestamp": "1222380000"
},
"office": "New York",
"extn": "1042"
},
{
"name": "Miriam Weiss",
"position": "Support Engineer",
"salary": "$4,965",
"start_date": {
"display": "Thu 3rd Feb 11",
"timestamp": "1296687600"
},
"office": "Edinburgh",
"extn": "2120"
},
{
"name": "Bruno Nash",
"position": "Software Engineer",
"salary": "$4,200",
"start_date": {
"display": "Tue 3rd May 11",
"timestamp": "1304373600"
},
"office": "London",
"extn": "6222"
},
{
"name": "Odessa Jackson",
"position": "Support Engineer",
"salary": "$3,600",
"start_date": {
"display": "Wed 19th Aug 09",
"timestamp": "1250632800"
},
"office": "Edinburgh",
"extn": "9383"
},
{
"name": "Thor Walton",
"position": "Developer",
"salary": "$3,600",
"start_date": {
"display": "Sun 11th Aug 13",
"timestamp": "1376172000"
},
"office": "New York",
"extn": "8327"
},
{
"name": "Finn Camacho",
"position": "Support Engineer",
"salary": "$4,800",
"start_date": {
"display": "Tue 7th Jul 09",
"timestamp": "1246917600"
},
"office": "San Francisco",
"extn": "2927"
},
{
"name": "Elton Baldwin",
"position": "Data Coordinator",
"salary": "$6,730",
"start_date": {
"display": "Mon 9th Apr 12",
"timestamp": "1333922400"
},
"office": "Edinburgh",
"extn": "8352"
},
{
"name": "Zenaida Frank",
"position": "Software Engineer",
"salary": "$4,800",
"start_date": {
"display": "Mon 4th Jan 10",
"timestamp": "1262559600"
},
"office": "New York",
"extn": "7439"
},
{
"name": "Zorita Serrano",
"position": "Software Engineer",
"salary": "$5,300",
"start_date": {
"display": "Fri 1st Jun 12",
"timestamp": "1338501600"
},
"office": "San Francisco",
"extn": "4389"
},
{
"name": "Jennifer Acosta",
"position": "Javascript Developer",
"salary": "$2,875",
"start_date": {
"display": "Fri 1st Feb 13",
"timestamp": "1359673200"
},
"office": "Edinburgh",
"extn": "3431"
},
{
"name": "Cara Stevens",
"position": "Sales Assistant",
"salary": "$4,800",
"start_date": {
"display": "Tue 6th Dec 11",
"timestamp": "1323126000"
},
"office": "New York",
"extn": "3990"
},
{
"name": "Hermione Butler",
"position": "Director",
"salary": "$4,080",
"start_date": {
"display": "Mon 21st Mar 11",
"timestamp": "1300662000"
},
"office": "London",
"extn": "1016"
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"salary": "$3,120",
"start_date": {
"display": "Fri 27th Feb 09",
"timestamp": "1235689200"
},
"office": "London",
"extn": "6733"
},
{
"name": "Jonas Alexander",
"position": "Developer",
"salary": "$5,300",
"start_date": {
"display": "Wed 14th Jul 10",
"timestamp": "1279058400"
},
"office": "San Francisco",
"extn": "8196"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"salary": "$5,300",
"start_date": {
"display": "Thu 13th Nov 08",
"timestamp": "1226530800"
},
"office": "Edinburgh",
"extn": "6373"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"salary": "$4,080",
"start_date": {
"display": "Mon 27th Jun 11",
"timestamp": "1309125600"
},
"office": "Edinburgh",
"extn": "5384"
},
{
"name": "Donna Snider",
"position": "System Architect",
"salary": "$3,120",
"start_date": {
"display": "Tue 25th Jan 11",
"timestamp": "1295910000"
},
"office": "New York",
"extn": "4226"
}
]
}

336
examples/ajax/orthogonal-data.html Normal file
View File

@ -0,0 +1,336 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<title>DataTables example - Orthogonal data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
ajax: "data/orthogonal.txt",
columns: [
{ data: "name" },
{ data: "position" },
{ data: "office" },
{ data: "extn" },
{ data: {
_: "start_date.display",
sort: "start_date.timestamp"
} },
{ data: "salary" }
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Orthogonal data</span></h1>
<div class="info">
<p>To try and make life easy, by default, DataTables expects arrays to be used as the data source for
rows in the table. However, this isn't always useful, and you may wish to have DataTables use objects
as the data source for each row (i.e. each row has its data described by an object) as this can make
working with the data much more understandable, particularly if you are using the API and you don't
need to keep track of array indexes.</p>
<p>This can be done quite simply by using the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option which you use to tell DataTables which property
to use from the data source object for each column.</p>
<p>In this example the Ajax source returns an array of objects, which DataTables uses to display the
table. The structure of the row's data source in this example is:</p>
<pre>
<code class="multiline">{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": {
"display": "Mon 25th Apr 11",
"timestamp": "1303682400"
},
"office": "Edinburgh",
"extn": "5421"
}
</code>
</pre>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
ajax: &quot;data/orthogonal.txt&quot;,
columns: [
{ data: &quot;name&quot; },
{ data: &quot;position&quot; },
{ data: &quot;office&quot; },
{ data: &quot;extn&quot; },
{ data: {
_: &quot;start_date.display&quot;,
sort: &quot;start_date.timestamp&quot;
} },
{ data: &quot;salary&quot; }
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Ajax</a></h3>
<ul class="toc active">
<li><a href="./simple.html">Ajax data source (arrays)</a></li>
<li><a href="./objects.html">Ajax data source (objects)</a></li>
<li><a href="./deep.html">Nested object data (objects)</a></li>
<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
<li class="active"><a href="./orthogonal-data.html">Orthogonal data</a></li>
<li><a href="./null_data_source.html">Generated content for a column</a></li>
<li><a href="./custom_data_property.html">Custom data source property</a></li>
<li><a href="./custom_data_flat.html">Flat array data source</a></li>
<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

188
examples/index.html Normal file
View File

@ -0,0 +1,188 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<link rel="stylesheet" type="text/css" href="./resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="./resources/demo.css">
<script type="text/javascript" language="javascript" src="../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="./resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="./resources/demo.js"></script>
<title>DataTables examples - Examples index</title>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Examples index</span></h1>
<div class="info">
<p>One of the best ways of learning how to do anything new (including software APIs!) is to get your
hands dirty as quickly as possible. These examples will show you how to perform tasks ranging from
something as simple as applying DataTables to an HTML table, right the way through to doing server-side
processing with pipelining and custom plug-in functions.</p>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<div class="toc">
<div class="toc-group">
<h3><a href="./basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li><a href="./basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="./basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="./basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="./basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="./basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="./basic_init/dom.html">DOM positioning</a></li>
<li><a href="./basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="./basic_init/state_save.html">State saving</a></li>
<li><a href="./basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="./basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="./basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="./basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li><a href="./advanced_init/events_live.html">DOM / jQuery events</a></li>
<li><a href="./advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="./advanced_init/column_render.html">Column rendering</a></li>
<li><a href="./advanced_init/length_menu.html">Page length options</a></li>
<li><a href="./advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="./advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="./advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="./advanced_init/language_file.html">Language file</a></li>
<li><a href="./advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="./advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="./advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="./advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="./advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="./styling/display.html">Base style</a></li>
<li><a href="./styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="./styling/row-border.html">Base style - row borders</a></li>
<li><a href="./styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="./styling/hover.html">Base style - hover</a></li>
<li><a href="./styling/order-column.html">Base style - order-column</a></li>
<li><a href="./styling/stripe.html">Base style - stripe</a></li>
<li><a href="./styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="./styling/bootstrap.html">Bootstrap</a></li>
<li><a href="./styling/foundation.html">Foundation</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li><a href="./data_sources/dom.html">HTML (DOM) sourced data</a></li>
<li><a href="./data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="./data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="./data_sources/server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./api/index.html">API</a></h3>
<ul class="toc">
<li><a href="./api/add_row.html">Add rows</a></li>
<li><a href="./api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="./api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="./api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="./api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="./api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="./api/form.html">Form inputs</a></li>
<li><a href="./api/counter_columns.html">Index column</a></li>
<li><a href="./api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="./api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./api/regex.html">Filtering API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li><a href="./ajax/simple.html">Ajax data source (arrays)</a></li>
<li><a href="./ajax/objects.html">Ajax data source (objects)</a></li>
<li><a href="./ajax/deep.html">Nested object data (objects)</a></li>
<li><a href="./ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="./ajax/orthogonal-data.html">Orthogonal data</a></li>
<li><a href="./ajax/null_data_source.html">Generated content for a column</a></li>
<li><a href="./ajax/custom_data_property.html">Custom data source property</a></li>
<li><a href="./ajax/custom_data_flat.html">Flat array data source</a></li>
<li><a href="./ajax/defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="./server_side/simple.html">Server-side processing</a></li>
<li><a href="./server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="./server_side/post.html">POST data</a></li>
<li><a href="./server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="./server_side/object_data.html">Object data source</a></li>
<li><a href="./server_side/row_details.html">Row details</a></li>
<li><a href="./server_side/select_rows.html">Row selection</a></li>
<li><a href="./server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="./server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="./server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="./plug-ins/api.html">API plug-in methods</a></li>
<li><a href="./plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="./plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="./plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="./plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

10
examples/resources/examples.php Normal file
View File

@ -0,0 +1,10 @@
<?php
if ( isset( $_POST['src'] ) && preg_match( '/scripts\/[a-zA-Z_\-_]+\.php/', $_POST['src'] ) !== 0 ) {
echo htmlspecialchars( file_get_contents( '../server_side/'.$_POST['src'] ) );
}
else {
echo '';
}

BIN
examples/resources/font/raleway_thin-webfont.eot Executable file
View File

Binary file not shown.

BIN
examples/resources/font/raleway_thin-webfont.ttf Executable file
View File

Binary file not shown.

BIN
examples/resources/font/raleway_thin-webfont.woff Executable file
View File

Binary file not shown.

316
examples/resources/jqueryui/dataTables.jqueryui.css Normal file
View File

@ -0,0 +1,316 @@
/*
* Table styles
*/
table.dataTable {
width: 100%;
margin: 0 auto;
clear: both;
border-collapse: separate;
border-spacing: 0;
/*
* Header and footer styles
*/
/*
* Body styles
*/
}
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
padding: 4px 10px;
}
table.dataTable thead th,
table.dataTable tfoot th {
font-weight: bold;
}
table.dataTable thead th:active,
table.dataTable thead td:active {
outline: none;
}
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting {
cursor: pointer;
*cursor: hand;
}
table.dataTable thead th div.DataTables_sort_wrapper {
position: relative;
padding-right: 10px;
}
table.dataTable thead th div.DataTables_sort_wrapper span {
position: absolute;
top: 50%;
margin-top: -8px;
right: -5px;
}
table.dataTable thead th.ui-state-default {
border-right-width: 0;
}
table.dataTable thead th.ui-state-default:last-child {
border-right-width: 1px;
}
table.dataTable tbody tr {
background-color: white;
}
table.dataTable tbody tr.selected {
background-color: #b0bed9;
}
table.dataTable tbody th,
table.dataTable tbody td {
padding: 8px 10px;
}
table.dataTable th.center,
table.dataTable td.center,
table.dataTable td.dataTables_empty {
text-align: center;
}
table.dataTable th.right,
table.dataTable td.right {
text-align: right;
}
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
border-top: 1px solid #dddddd;
}
table.dataTable.row-border tbody tr:first-child th,
table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th,
table.dataTable.display tbody tr:first-child td {
border-top: none;
}
table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td {
border-top: 1px solid #dddddd;
border-right: 1px solid #dddddd;
}
table.dataTable.cell-border tbody tr th:first-child,
table.dataTable.cell-border tbody tr td:first-child {
border-left: 1px solid #dddddd;
}
table.dataTable.cell-border tbody tr:first-child th,
table.dataTable.cell-border tbody tr:first-child td {
border-top: none;
}
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
background-color: #f9f9f9;
}
table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected {
background-color: #abb9d3;
}
table.dataTable.hover tbody tr:hover,
table.dataTable.hover tbody tr.odd:hover,
table.dataTable.hover tbody tr.even:hover, table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr.odd:hover,
table.dataTable.display tbody tr.even:hover {
background-color: whitesmoke;
}
table.dataTable.hover tbody tr:hover.selected,
table.dataTable.hover tbody tr.odd:hover.selected,
table.dataTable.hover tbody tr.even:hover.selected, table.dataTable.display tbody tr:hover.selected,
table.dataTable.display tbody tr.odd:hover.selected,
table.dataTable.display tbody tr.even:hover.selected {
background-color: #a9b7d1;
}
table.dataTable.order-column tbody tr > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_2,
table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
table.dataTable.display tbody tr > .sorting_2,
table.dataTable.display tbody tr > .sorting_3 {
background-color: #f9f9f9;
}
table.dataTable.order-column tbody tr.selected > .sorting_1,
table.dataTable.order-column tbody tr.selected > .sorting_2,
table.dataTable.order-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1,
table.dataTable.display tbody tr.selected > .sorting_2,
table.dataTable.display tbody tr.selected > .sorting_3 {
background-color: #acbad4;
}
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
background-color: #f1f1f1;
}
table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
background-color: #f3f3f3;
}
table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
background-color: whitesmoke;
}
table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
background-color: #a6b3cd;
}
table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
background-color: #a7b5ce;
}
table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
background-color: #a9b6d0;
}
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
background-color: #f9f9f9;
}
table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
background-color: #fbfbfb;
}
table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
background-color: #fdfdfd;
}
table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
background-color: #acbad4;
}
table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
background-color: #adbbd6;
}
table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
background-color: #afbdd8;
}
table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.display tbody tr.odd:hover > .sorting_1,
table.dataTable.display tbody tr.even:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr.even:hover > .sorting_1 {
background-color: #eaeaea;
}
table.dataTable.display tbody tr:hover > .sorting_2,
table.dataTable.display tbody tr.odd:hover > .sorting_2,
table.dataTable.display tbody tr.even:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2,
table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_2,
table.dataTable.order-column.hover tbody tr.even:hover > .sorting_2 {
background-color: #ebebeb;
}
table.dataTable.display tbody tr:hover > .sorting_3,
table.dataTable.display tbody tr.odd:hover > .sorting_3,
table.dataTable.display tbody tr.even:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3,
table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_3,
table.dataTable.order-column.hover tbody tr.even:hover > .sorting_3 {
background-color: #eeeeee;
}
table.dataTable.display tbody tr:hover.selected > .sorting_1,
table.dataTable.display tbody tr.odd:hover.selected > .sorting_1,
table.dataTable.display tbody tr.even:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1,
table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_1,
table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_1 {
background-color: #a1aec7;
}
table.dataTable.display tbody tr:hover.selected > .sorting_2,
table.dataTable.display tbody tr.odd:hover.selected > .sorting_2,
table.dataTable.display tbody tr.even:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2,
table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_2,
table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_2 {
background-color: #a2afc8;
}
table.dataTable.display tbody tr:hover.selected > .sorting_3,
table.dataTable.display tbody tr.odd:hover.selected > .sorting_3,
table.dataTable.display tbody tr.even:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3,
table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_3,
table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_3 {
background-color: #a4b2cb;
}
table.dataTable,
table.dataTable th,
table.dataTable td {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/*
* Control feature layout
*/
.dataTables_wrapper {
position: relative;
clear: both;
*zoom: 1;
zoom: 1;
}
.dataTables_wrapper .dataTables_length {
float: left;
}
.dataTables_wrapper .dataTables_filter {
float: right;
text-align: right;
}
.dataTables_wrapper .dataTables_filter input {
margin-left: 0.5em;
}
.dataTables_wrapper .dataTables_info {
clear: both;
float: left;
padding-top: 0.55em;
}
.dataTables_wrapper .dataTables_paginate {
float: right;
text-align: right;
}
.dataTables_wrapper .dataTables_paginate .fg-button {
box-sizing: border-box;
display: inline-block;
min-width: 1.5em;
padding: 0.5em;
margin-left: 2px;
text-align: center;
text-decoration: none !important;
cursor: pointer;
*cursor: hand;
color: #333333 !important;
border: 1px solid transparent;
}
.dataTables_wrapper .dataTables_paginate .fg-button:active {
outline: none;
}
.dataTables_wrapper .dataTables_paginate .fg-button:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.dataTables_wrapper .dataTables_paginate .fg-button:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.dataTables_wrapper .dataTables_processing {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 40px;
margin-left: -50%;
margin-top: -25px;
padding-top: 20px;
text-align: center;
font-size: 1.2em;
background-color: white;
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
/* FF3.6+ */
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
/* IE10+ */
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
/* Opera 11.10+ */
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
/* W3C */
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
color: #333333;
}
.dataTables_wrapper .dataTables_scroll {
clear: both;
}
.dataTables_wrapper .dataTables_scrollBody {
*margin-top: -1px;
-webkit-overflow-scrolling: touch;
}
.dataTables_wrapper .ui-widget-header {
font-weight: normal;
}
.dataTables_wrapper .ui-toolbar {
padding: 8px;
}
.dataTables_wrapper:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}

102
examples/resources/jqueryui/dataTables.jqueryui.js Normal file
View File

@ -0,0 +1,102 @@
(function(){
var DataTable = $.fn.dataTable;
var sort_prefix = 'css_right ui-icon ui-icon-';
var toolbar_prefix = 'fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-';
/* Set the defaults for DataTables initialisation */
$.extend( true, DataTable.defaults, {
dom:
'<"'+toolbar_prefix+'tl ui-corner-tr"lfr>'+
't'+
'<"'+toolbar_prefix+'bl ui-corner-br"ip>',
renderer: 'jqueryui'
} );
$.extend( DataTable.ext.classes, {
/* Full numbers paging buttons */
"sPageButton": "fg-button ui-button ui-state-default",
"sPageButtonActive": "ui-state-disabled",
"sPageButtonDisabled": "ui-state-disabled",
/* Features */
"sPaging": "dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi "+
"ui-buttonset-multi paging_", /* Note that the type is postfixed */
/* Sorting */
"sSortAsc": "ui-state-default sorting_asc",
"sSortDesc": "ui-state-default sorting_desc",
"sSortable": "ui-state-default sorting",
"sSortableAsc": "ui-state-default sorting_asc_disabled",
"sSortableDesc": "ui-state-default sorting_desc_disabled",
"sSortableNone": "ui-state-default sorting_disabled",
"sSortIcon": "DataTables_sort_icon",
/* Scrolling */
"sScrollHead": "dataTables_scrollHead "+"ui-state-default",
"sScrollFoot": "dataTables_scrollFoot "+"ui-state-default",
/* Misc */
"sHeaderTH": "ui-state-default",
"sFooterTH": "ui-state-default",
} );
DataTable.ext.renderer.header.jqueryui = function ( settings, cell, column, idx, classes ) {
$('<div/>')
.addClass( 'DataTables_sort_wrapper' )
.append( cell.contents() )
.append( $('<span/>')
.addClass( classes.sSortIcon+' '+column.sSortingClassJUI )
)
.appendTo( cell );
// Attach a sort listener to update on sort
$(settings.nTable).on( 'order.dt', function ( e, settings, sorting, columns ) {
cell
.removeClass( classes.sSortAsc +" "+classes.sSortDesc )
.addClass( columns[ idx ] == 'asc' ?
classes.sSortAsc : columns[ idx ] == 'desc' ?
classes.sSortDesc :
column.sSortingClass
);
cell
.find( 'span' )
.removeClass(
sort_prefix+'triangle-1-n' +" "+
sort_prefix+'triangle-1-s' +" "+
sort_prefix+'carat-2-n-s' +" "+
sort_prefix+'carat-1-n' +" "+
sort_prefix+'carat-1-s'
)
.addClass( columns[ idx ] == 'asc' ?
sort_prefix+'triangle-1-n' : columns[ idx ] == 'desc' ?
sort_prefix+'triangle-1-s' :
column.sSortingClassJUI
);
} );
}
/*
* TableTools jQuery UI compatibility
* Required TableTools 2.1+
*/
if ( DataTable.TableTools ) {
$.extend( true, DataTable.TableTools.classes, {
"container": "DTTT_container ui-buttonset ui-buttonset-multi",
"buttons": {
"normal": "DTTT_button ui-button ui-state-default"
},
"collection": {
"container": "DTTT_collection ui-buttonset ui-buttonset-multi"
}
} );
}
}());

408
examples/resources/jqueryui/dataTables.jqueryui.scss Normal file
View File

@ -0,0 +1,408 @@
//
// Colour customisation
//
// Border between the header (and footer) and the table body
$table-header-border: 1px solid #111;
// Border of rows / cells
$table-body-border: 1px solid #ddd;
// Row background colour (hover, striping etc are all based on this colour and
// calculated automatically)
$table-row-background: #ffffff;
// Row colour, when selected (tr.selected)
$table-row-selected: #B0BED9;
// Text colour of the interaction control elements (info, filter, paging etc)
$table-control-color: #333;
// Highlight colour of the paging button for the current page
$table-paging-button-active: #dcdcdc;
// Hover colour of paging buttons on mouse over
$table-paging-button-hover: #111;
//
// Functions / mixins
//
@function tint( $color, $percent ) {
@return mix(white, $color, $percent);
}
@function shade( $color, $percent ) {
@return mix(black, $color, $percent);
}
@mixin gradient( $from, $to ) {
background-color: $from;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, $from 0%, $to 100%); /* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, $from 0%, $to 100%); /* FF3.6+ */
background: -ms-linear-gradient(top, $from 0%, $to 100%); /* IE10+ */
background: -o-linear-gradient(top, $from 0%, $to 100%); /* Opera 11.10+ */
background: linear-gradient(to bottom, $from 0%, $to 100%); /* W3C */
}
/*
* Table styles
*/
table.dataTable {
width: 100%;
margin: 0 auto;
clear: both;
border-collapse: separate;
border-spacing: 0;
/*
* Header and footer styles
*/
thead,
tfoot {
th,
td {
padding: 4px 10px;
}
th {
font-weight: bold;
}
}
thead th,
thead td {
&:active {
outline: none;
}
}
// Sorting
thead {
.sorting_asc,
.sorting_desc,
.sorting {
cursor: pointer;
*cursor: hand;
}
th div.DataTables_sort_wrapper {
position: relative;
padding-right: 10px;
span {
position: absolute;
top: 50%;
margin-top: -8px;
right: -5px;
}
}
th.ui-state-default {
border-right-width: 0;
&:last-child {
border-right-width: 1px;
}
}
}
/*
* Body styles
*/
tbody {
tr {
background-color: $table-row-background;
&.selected {
background-color: $table-row-selected;
}
}
th,
td {
padding: 8px 10px;
}
}
th.center,
td.center,
td.dataTables_empty {
text-align: center;
}
th.right,
td.right {
text-align: right;
}
// Stripe classes - add "row-border" class to the table to activate
&.row-border tbody,
&.display tbody {
th, td {
border-top: $table-body-border;
}
tr:first-child th,
tr:first-child td {
border-top: none;
}
}
// Stripe classes - add "cell-border" class to the table to activate
&.cell-border tbody {
th, td {
border-top: $table-body-border;
border-right: $table-body-border;
}
tr th:first-child,
tr td:first-child {
border-left: $table-body-border;
}
tr:first-child th,
tr:first-child td {
border-top: none;
}
}
// Stripe classes - add "stripe" class to the table to activate
&.stripe tbody,
&.display tbody {
tr.odd {
background-color: shade($table-row-background, 2.35%); // shade by f9
&.selected {
background-color: shade($table-row-selected, 2.35%);
}
}
}
// Hover classes - add "hover" class to the table to activate
&.hover tbody,
&.display tbody {
tr:hover,
tr.odd:hover,
tr.even:hover {
background-color: shade($table-row-background, 3.6%); // shade by f5
&.selected {
background-color: shade($table-row-selected, 3.6%);
}
}
}
// Sort column highlighting - add "hover" class to the table to activate
&.order-column,
&.display {
tbody {
tr>.sorting_1,
tr>.sorting_2,
tr>.sorting_3 {
background-color: shade($table-row-background, 2%); // shade by fa
}
tr.selected>.sorting_1,
tr.selected>.sorting_2,
tr.selected>.sorting_3 {
background-color: shade($table-row-selected, 2%);
}
}
}
&.display tbody,
&.order-column.stripe tbody {
tr.odd {
>.sorting_1 { background-color: shade($table-row-background, 5.4%); } // shade by f1
>.sorting_2 { background-color: shade($table-row-background, 4.7%); } // shade by f3
>.sorting_3 { background-color: shade($table-row-background, 3.9%); } // shade by f5
&.selected {
>.sorting_1 { background-color: shade($table-row-selected, 5.4%); }
>.sorting_2 { background-color: shade($table-row-selected, 4.7%); }
>.sorting_3 { background-color: shade($table-row-selected, 3.9%); }
}
}
tr.even {
>.sorting_1 { background-color: shade($table-row-background, 2%); } // shade by fa
>.sorting_2 { background-color: shade($table-row-background, 1.2%); } // shade by fc
>.sorting_3 { background-color: shade($table-row-background, 0.4%); } // shade by fe
&.selected {
>.sorting_1 { background-color: shade($table-row-selected, 2%); }
>.sorting_2 { background-color: shade($table-row-selected, 1.2%); }
>.sorting_3 { background-color: shade($table-row-selected, 0.4%); }
}
}
}
&.display tbody,
&.order-column.hover tbody {
tr:hover,
tr.odd:hover,
tr.even:hover {
>.sorting_1 { background-color: shade($table-row-background, 8.2%); } // shade by ea
>.sorting_2 { background-color: shade($table-row-background, 7.5%); } // shade by ec
>.sorting_3 { background-color: shade($table-row-background, 6.3%); } // shade by ef
&.selected {
>.sorting_1 { background-color: shade($table-row-selected, 8.2%); }
>.sorting_2 { background-color: shade($table-row-selected, 7.5%); }
>.sorting_3 { background-color: shade($table-row-selected, 6.3%); }
}
}
}
}
// Its not uncommon to use * {border-box} now, but it messes up the column width
// calculations, so use content-box for the table and cells
table.dataTable,
table.dataTable th,
table.dataTable td {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/*
* Control feature layout
*/
.dataTables_wrapper {
position: relative;
clear: both;
*zoom: 1;
// Page length options
.dataTables_length {
float: left;
}
// Filtering input
.dataTables_filter {
float: right;
text-align: right;
input {
margin-left: 0.5em;
}
}
// Table info
.dataTables_info {
clear: both;
float: left;
padding-top: 0.55em;
}
// Paging
.dataTables_paginate {
float: right;
text-align: right;
.fg-button {
box-sizing: border-box;
display: inline-block;
min-width: 1.5em;
padding: 0.5em;
margin-left: 2px;
text-align: center;
text-decoration: none !important;
cursor: pointer;
*cursor: hand;
color: $table-control-color !important;
border: 1px solid transparent;
&:active {
outline: none;
}
}
.fg-button:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.fg-button:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
}
// Processing
.dataTables_processing {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 40px;
margin-left: -50%;
margin-top: -25px;
padding-top: 20px;
text-align: center;
font-size: 1.2em;
background-color: white;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba($table-row-background, 0)), color-stop(25%,rgba($table-row-background, 0.9)), color-stop(75%,rgba($table-row-background, 0.9)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba($table-row-background, 0) 0%, rgba($table-row-background, 0.9) 25%, rgba($table-row-background, 0.9) 75%, rgba($table-row-background, 0) 100%); /* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(left, rgba($table-row-background, 0) 0%, rgba($table-row-background, 0.9) 25%, rgba($table-row-background, 0.9) 75%, rgba($table-row-background, 0) 100%); /* FF3.6+ */
background: -ms-linear-gradient(left, rgba($table-row-background, 0) 0%, rgba($table-row-background, 0.9) 25%, rgba($table-row-background, 0.9) 75%, rgba($table-row-background, 0) 100%); /* IE10+ */
background: -o-linear-gradient(left, rgba($table-row-background, 0) 0%, rgba($table-row-background, 0.9) 25%, rgba($table-row-background, 0.9) 75%, rgba($table-row-background, 0) 100%); /* Opera 11.10+ */
background: linear-gradient(to right, rgba($table-row-background, 0) 0%, rgba($table-row-background, 0.9) 25%, rgba($table-row-background, 0.9) 75%, rgba($table-row-background, 0) 100%); /* W3C */
}
.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_processing,
.dataTables_paginate {
color: $table-control-color;
}
// Scrolling
.dataTables_scroll {
clear: both;
}
.dataTables_scrollBody {
*margin-top: -1px;
-webkit-overflow-scrolling: touch;
}
.ui-widget-header {
font-weight: normal;
}
.ui-toolbar {
padding: 8px;
}
// Self clear the wrapper
&:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
zoom: 1; // Poor old IE
}

443
examples/resources/jqueryui/index.html Normal file
View File

@ -0,0 +1,443 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>DataTables jQuery UI example</title>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="dataTables.jqueryui.css">
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!--<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10-dev/js/jquery.dataTables.js"></script>-->
<script type="text/javascript" language="javascript" src="/dataTables/DataTablesSrc/built/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="dataTables.jqueryui.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
</head>
<body>
<div class="container">
<table cellpadding="0" cellspacing="0" border="0" class="display" 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>
</body>
</html>