WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

DATATABLES

  1. Home
  2. Shortcodes
  3. Datatables

Datatable with TableTools

Rendering engine Browser Platform(s) Engine version CSS grade
Trident Internet Explorer 4.0 Win 95+ 4 X
Trident Internet Explorer 5.0 Win 95+ 5 C
Trident Internet Explorer 5.5 Win 95+ 5.5 A
Trident Internet Explorer 6 Win 98+ 6 A
Trident Internet Explorer 7 Win XP SP2+ 7 A
Trident AOL browser (AOL desktop) Win XP 6 A
Gecko Firefox 1.0 Win 98+ / OSX.2+ 1.7 A
Gecko Firefox 1.5 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 2.0 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 3.0 Win 2k+ / OSX.3+ 1.9 A
Gecko Camino 1.0 OSX.2+ 1.8 A
Gecko Camino 1.5 OSX.3+ 1.8 A
Gecko Netscape 7.2 Win 95+ / Mac OS 8.6-9.2 1.7 A
Gecko Netscape Browser 8 Win 98SE+ 1.7 A
Gecko Netscape Navigator 9 Win 98+ / OSX.2+ 1.8 A
Gecko Mozilla 1.0 Win 95+ / OSX.1+ 1 A
Gecko Mozilla 1.1 Win 95+ / OSX.1+ 1.1 A
Gecko Mozilla 1.2 Win 95+ / OSX.1+ 1.2 A
Gecko Mozilla 1.3 Win 95+ / OSX.1+ 1.3 A
Gecko Mozilla 1.4 Win 95+ / OSX.1+ 1.4 A
Gecko Mozilla 1.5 Win 95+ / OSX.1+ 1.5 A
Gecko Mozilla 1.6 Win 95+ / OSX.1+ 1.6 A
Gecko Mozilla 1.7 Win 98+ / OSX.1+ 1.7 A
Gecko Mozilla 1.8 Win 98+ / OSX.1+ 1.8 A
Gecko Seamonkey 1.1 Win 98+ / OSX.2+ 1.8 A
Gecko Epiphany 2.20 Gnome 1.8 A
Webkit Safari 1.2 OSX.3 125.5 A
Webkit Safari 1.3 OSX.3 312.8 A
Webkit Safari 2.0 OSX.4+ 419.3 A
Webkit Safari 3.0 OSX.4+ 522.1 A
Webkit OmniWeb 5.5 OSX.4+ 420 A
Webkit iPod Touch / iPhone iPod 420.1 A
Webkit S60 S60 413 A
Presto Opera 7.0 Win 95+ / OSX.1+ - A
Presto Opera 7.5 Win 95+ / OSX.2+ - A
Presto Opera 8.0 Win 95+ / OSX.2+ - A
Presto Opera 8.5 Win 95+ / OSX.2+ - A
Presto Opera 9.0 Win 95+ / OSX.3+ - A
Presto Opera 9.2 Win 88+ / OSX.3+ - A
Presto Opera 9.5 Win 88+ / OSX.3+ - A
Presto Opera for Wii Wii - A
Presto Nokia N800 N800 - A
Presto Nintendo DS browser Nintendo DS 8.5 C/A1
Show Code 
<!-- HTML DATATABLES -->
<table class="table table-striped table-bordered table-hover" id="sample_1">
	<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>
			<td>Trident</td>
			<td>Internet Explorer 4.0</td>
			<td>Win 95+</td>
			<td>4</td>
			<td>X</td>
		</tr>
		<tr>
			<td>Trident</td>
			<td>Internet Explorer 5.0</td>
			<td>Win 95+</td>
			<td>5</td>
			<td>C</td>
		</tr>
		<tr>
			<td>Trident</td>
			<td>Internet Explorer 5.5</td>
			<td>Win 95+</td>
			<td>5.5</td>
			<td>A</td>
		</tr>
		<tr>
			<td>Trident</td>
			<td>Internet Explorer 6</td>
			<td>Win 98+</td>
			<td>6</td>
			<td>A</td>
		</tr>
		<tr>
			<td>Trident</td>
			<td>Internet Explorer 7</td>
			<td>Win XP SP2+</td>
			<td>7</td>
			<td>A</td>
		</tr>
		<tr>
			<td>Trident</td>
			<td>AOL browser (AOL desktop)</td>
			<td>Win XP</td>
			<td>6</td>
			<td>A</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 1.0
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 1.5
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 2.0
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 3.0
			</td>
			<td>Win 2k+ / OSX.3+
			</td>
			<td>1.9
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Camino 1.0
			</td>
			<td>OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Camino 1.5
			</td>
			<td>OSX.3+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Netscape 7.2
			</td>
			<td>Win 95+ / Mac OS 8.6-9.2
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Netscape Browser 8
			</td>
			<td>Win 98SE+
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Netscape Navigator 9
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.0
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.1
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.2
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.2
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.3
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.3
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.4
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.4
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.5
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.5
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.6
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.6
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.7
			</td>
			<td>Win 98+ / OSX.1+
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.8
			</td>
			<td>Win 98+ / OSX.1+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Seamonkey 1.1
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Epiphany 2.20
			</td>
			<td>Gnome
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 1.2
			</td>
			<td>OSX.3
			</td>
			<td>125.5
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 1.3
			</td>
			<td>OSX.3
			</td>
			<td>312.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 2.0
			</td>
			<td>OSX.4+
			</td>
			<td>419.3
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 3.0
			</td>
			<td>OSX.4+
			</td>
			<td>522.1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>OmniWeb 5.5
			</td>
			<td>OSX.4+
			</td>
			<td>420
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>iPod Touch / iPhone
			</td>
			<td>iPod
			</td>
			<td>420.1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>S60
			</td>
			<td>S60
			</td>
			<td>413
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 7.0
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 7.5
			</td>
			<td>Win 95+ / OSX.2+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 8.0
			</td>
			<td>Win 95+ / OSX.2+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 8.5
			</td>
			<td>Win 95+ / OSX.2+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 9.0
			</td>
			<td>Win 95+ / OSX.3+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 9.2
			</td>
			<td>Win 88+ / OSX.3+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 9.5
			</td>
			<td>Win 88+ / OSX.3+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera for Wii
			</td>
			<td>Wii
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Nokia N800
			</td>
			<td>N800
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Nintendo DS browser
			</td>
			<td>Nintendo DS
			</td>
			<td>8.5
			</td>
			<td>C/A<sup>1</sup>
			</td>
		</tr>
	</tbody>
</table>



<!-- CSS DATATABLES -->
<link href="assets/css/layout-datatables.css" rel="stylesheet" type="text/css" />


<!-- JS DATATABLES -->
<script type="text/javascript" src="assets/plugins/datatables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="assets/plugins/select2/js/select2.full.min.js"></script>
<script type="text/javascript">

		function initTable1() {
			var table = jQuery('#sample_1');

			/* Table tools samples: https://www.datatables.net/release-datatables/extras/TableTools/ */

			/* Set tabletools buttons and button container */

			$.extend(true, $.fn.DataTable.TableTools.classes, {
				"container": "btn-group pull-right tabletools-topbar",
				"buttons": {
					"normal": "btn btn-sm btn-default",
					"disabled": "btn btn-sm btn-default disabled"
				},
				"collection": {
					"container": "DTTT_dropdown dropdown-menu tabletools-dropdown-menu"
				}
			});

			var oTable = table.dataTable({
				"order": [
					[0, 'asc']
				],
				
				"lengthMenu": [
					[5, 15, 20, -1],
					[5, 15, 20, "All"] // change per page values here
				],
				// set the initial value
				"pageLength": 10,

				"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable

				"tableTools": {
					"sSwfPath": "assets/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
					"aButtons": [{
						"sExtends": "pdf",
						"sButtonText": "PDF"
					}, {
						"sExtends": "csv",
						"sButtonText": "CSV"
					}, {
						"sExtends": "xls",
						"sButtonText": "Excel"
					}, {
						"sExtends": "print",
						"sButtonText": "Print",
						"sInfo": 'Please press "CTR+P" to print or "ESC" to quit',
						"sMessage": "Generated by DataTables"
					}]
				}
			});

			var tableWrapper = jQuery('#sample_1_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper

			tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
		}

		// Table Init
		initTable1();
</script>

Datatable with TableTools

Rendering engine Browser Platform(s) Engine version CSS grade
Trident Internet Explorer 4.0 Win 95+ 4 X
Trident Internet Explorer 5.0 Win 95+ 5 C
Trident Internet Explorer 5.5 Win 95+ 5.5 A
Trident Internet Explorer 6 Win 98+ 6 A
Trident Internet Explorer 7 Win XP SP2+ 7 A
Trident AOL browser (AOL desktop) Win XP 6 A
Gecko Firefox 1.0 Win 98+ / OSX.2+ 1.7 A
Gecko Firefox 1.5 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 2.0 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 3.0 Win 2k+ / OSX.3+ 1.9 A
Gecko Camino 1.0 OSX.2+ 1.8 A
Gecko Camino 1.5 OSX.3+ 1.8 A
Gecko Netscape 7.2 Win 95+ / Mac OS 8.6-9.2 1.7 A
Gecko Netscape Browser 8 Win 98SE+ 1.7 A
Gecko Netscape Navigator 9 Win 98+ / OSX.2+ 1.8 A
Gecko Mozilla 1.0 Win 95+ / OSX.1+ 1 A
Gecko Mozilla 1.1 Win 95+ / OSX.1+ 1.1 A
Gecko Mozilla 1.2 Win 95+ / OSX.1+ 1.2 A
Gecko Mozilla 1.3 Win 95+ / OSX.1+ 1.3 A
Gecko Mozilla 1.4 Win 95+ / OSX.1+ 1.4 A
Gecko Mozilla 1.5 Win 95+ / OSX.1+ 1.5 A
Gecko Mozilla 1.6 Win 95+ / OSX.1+ 1.6 A
Gecko Mozilla 1.7 Win 98+ / OSX.1+ 1.7 A
Gecko Mozilla 1.8 Win 98+ / OSX.1+ 1.8 A
Gecko Seamonkey 1.1 Win 98+ / OSX.2+ 1.8 A
Gecko Epiphany 2.20 Gnome 1.8 A
Webkit Safari 1.2 OSX.3 125.5 A
Webkit Safari 1.3 OSX.3 312.8 A
Webkit Safari 2.0 OSX.4+ 419.3 A
Webkit Safari 3.0 OSX.4+ 522.1 A
Webkit OmniWeb 5.5 OSX.4+ 420 A
Webkit iPod Touch / iPhone iPod 420.1 A
Webkit S60 S60 413 A
Presto Opera 7.0 Win 95+ / OSX.1+ - A
Presto Opera 7.5 Win 95+ / OSX.2+ - A
Presto Opera 8.0 Win 95+ / OSX.2+ - A
Presto Opera 8.5 Win 95+ / OSX.2+ - A
Presto Opera 9.0 Win 95+ / OSX.3+ - A
Presto Opera 9.2 Win 88+ / OSX.3+ - A
Presto Opera 9.5 Win 88+ / OSX.3+ - A
Presto Opera for Wii Wii - A
Presto Nokia N800 N800 - A
Presto Nintendo DS browser Nintendo DS 8.5 C/A1
Show Code 
<!-- HTML DATATABLES -->
<table class="table table-striped table-bordered table-hover" id="sample_2">
	<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>
			<td>Trident
			</td>
			<td>Internet Explorer 4.0
			</td>
			<td>Win 95+
			</td>
			<td>4
			</td>
			<td>X
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>Internet Explorer 5.0
			</td>
			<td>Win 95+
			</td>
			<td>5
			</td>
			<td>C
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>Internet Explorer 5.5
			</td>
			<td>Win 95+
			</td>
			<td>5.5
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>Internet Explorer 6
			</td>
			<td>Win 98+
			</td>
			<td>6
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>Internet Explorer 7
			</td>
			<td>Win XP SP2+
			</td>
			<td>7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>AOL browser (AOL desktop)
			</td>
			<td>Win XP
			</td>
			<td>6
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 1.0
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 1.5
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 2.0
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 3.0
			</td>
			<td>Win 2k+ / OSX.3+
			</td>
			<td>1.9
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Camino 1.0
			</td>
			<td>OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Camino 1.5
			</td>
			<td>OSX.3+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Netscape 7.2
			</td>
			<td>Win 95+ / Mac OS 8.6-9.2
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Netscape Browser 8
			</td>
			<td>Win 98SE+
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Netscape Navigator 9
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.0
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.1
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.2
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.2
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.3
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.3
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.4
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.4
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.5
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.5
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.6
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.6
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.7
			</td>
			<td>Win 98+ / OSX.1+
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.8
			</td>
			<td>Win 98+ / OSX.1+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Seamonkey 1.1
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Epiphany 2.20
			</td>
			<td>Gnome
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 1.2
			</td>
			<td>OSX.3
			</td>
			<td>125.5
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 1.3
			</td>
			<td>OSX.3
			</td>
			<td>312.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 2.0
			</td>
			<td>OSX.4+
			</td>
			<td>419.3
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 3.0
			</td>
			<td>OSX.4+
			</td>
			<td>522.1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>OmniWeb 5.5
			</td>
			<td>OSX.4+
			</td>
			<td>420
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>iPod Touch / iPhone
			</td>
			<td>iPod
			</td>
			<td>420.1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>S60
			</td>
			<td>S60
			</td>
			<td>413
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 7.0
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 7.5
			</td>
			<td>Win 95+ / OSX.2+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 8.0
			</td>
			<td>Win 95+ / OSX.2+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 8.5
			</td>
			<td>Win 95+ / OSX.2+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 9.0
			</td>
			<td>Win 95+ / OSX.3+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 9.2
			</td>
			<td>Win 88+ / OSX.3+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 9.5
			</td>
			<td>Win 88+ / OSX.3+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera for Wii
			</td>
			<td>Wii
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Nokia N800
			</td>
			<td>N800
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Nintendo DS browser
			</td>
			<td>Nintendo DS
			</td>
			<td>8.5
			</td>
			<td>C/A<sup>1</sup>
			</td>
		</tr>
	</tbody>
</table>



<!-- CSS DATATABLES -->
<link href="assets/css/layout-datatables.css" rel="stylesheet" type="text/css" />


<!-- JS DATATABLES -->
<script type="text/javascript" src="assets/plugins/datatables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="assets/plugins/select2/js/select2.full.min.js"></script>
<script type="text/javascript">
	function initTable2() {
		var table = jQuery('#sample_2');

		/* Table tools samples: https://www.datatables.net/release-datatables/extras/TableTools/ */

		/* Set tabletools buttons and button container */

		$.extend(true, $.fn.DataTable.TableTools.classes, {
			"container": "btn-group tabletools-btn-group pull-right",
			"buttons": {
				"normal": "btn btn-sm btn-default",
				"disabled": "btn btn-sm btn-default disabled"
			}
		});

		var oTable = table.dataTable({
			"order": [
				[0, 'asc']
			],
			"lengthMenu": [
				[5, 15, 20, -1],
				[5, 15, 20, "All"] // change per page values here
			],

			// set the initial value
			"pageLength": 10,
			"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable

			"tableTools": {
				"sSwfPath": "assets/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
				"aButtons": [{
					"sExtends": "pdf",
					"sButtonText": "PDF"
				}, {
					"sExtends": "csv",
					"sButtonText": "CSV"
				}, {
					"sExtends": "xls",
					"sButtonText": "Excel"
				}, {
					"sExtends": "print",
					"sButtonText": "Print",
					"sInfo": 'Please press "CTRL+P" to print or "ESC" to quit',
					"sMessage": "Generated by DataTables"
				}, {
					"sExtends": "copy",
					"sButtonText": "Copy"
				}]
			}
		});

		var tableWrapper = jQuery('#sample_2_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper
		tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
	}


	// Table Init
	initTable2();
</script>

Show/Hide Columns

Rendering engine Browser
Trident Internet Explorer 4.0 Win 95+ 4 X
Trident Internet Explorer 5.0 Win 95+ 5 C
Trident Internet Explorer 5.5 Win 95+ 5.5 A
Trident Internet Explorer 6 Win 98+ 6 A
Trident Internet Explorer 7 Win XP SP2+ 7 A
Trident AOL browser (AOL desktop) Win XP 6 A
Gecko Firefox 1.0 Win 98+ / OSX.2+ 1.7 A
Gecko Firefox 1.5 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 2.0 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 3.0 Win 2k+ / OSX.3+ 1.9 A
Gecko Camino 1.0 OSX.2+ 1.8 A
Gecko Camino 1.5 OSX.3+ 1.8 A
Gecko Netscape 7.2 Win 95+ / Mac OS 8.6-9.2 1.7 A
Gecko Netscape Browser 8 Win 98SE+ 1.7 A
Gecko Netscape Navigator 9 Win 98+ / OSX.2+ 1.8 A
Gecko Mozilla 1.0 Win 95+ / OSX.1+ 1 A
Gecko Mozilla 1.1 Win 95+ / OSX.1+ 1.1 A
Gecko Mozilla 1.2 Win 95+ / OSX.1+ 1.2 A
Gecko Mozilla 1.3 Win 95+ / OSX.1+ 1.3 A
Gecko Mozilla 1.4 Win 95+ / OSX.1+ 1.4 A
Gecko Mozilla 1.5 Win 95+ / OSX.1+ 1.5 A
Gecko Mozilla 1.6 Win 95+ / OSX.1+ 1.6 A
Gecko Mozilla 1.7 Win 98+ / OSX.1+ 1.7 A
Gecko Mozilla 1.8 Win 98+ / OSX.1+ 1.8 A
Gecko Seamonkey 1.1 Win 98+ / OSX.2+ 1.8 A
Gecko Epiphany 2.20 Gnome 1.8 A
Webkit Safari 1.2 OSX.3 125.5 A
Webkit Safari 1.3 OSX.3 312.8 A
Webkit Safari 2.0 OSX.4+ 419.3 A
Webkit Safari 3.0 OSX.4+ 522.1 A
Webkit OmniWeb 5.5 OSX.4+ 420 A
Webkit iPod Touch / iPhone iPod 420.1 A
Webkit S60 S60 413 A
Presto Opera 7.0 Win 95+ / OSX.1+ - A
Presto Opera 7.5 Win 95+ / OSX.2+ - A
Presto Opera 8.0 Win 95+ / OSX.2+ - A
Presto Opera 8.5 Win 95+ / OSX.2+ - A
Presto Opera 9.0 Win 95+ / OSX.3+ - A
Presto Opera 9.2 Win 88+ / OSX.3+ - A
Presto Opera 9.5 Win 88+ / OSX.3+ - A
Presto Opera for Wii Wii - A
Presto Nokia N800 N800 - A
Presto Nintendo DS browser Nintendo DS 8.5 C/A1
Show Code 
<!-- HTML DATATABLES -->
<table class="table table-striped table-bordered table-hover" id="sample_3">
	<thead>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th class="hidden-xs">Platform(s)</th>
			<th class="hidden-xs">Engine version</th>
			<th class="hidden-xs">CSS grade</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Trident
			</td>
			<td>Internet Explorer 4.0
			</td>
			<td>Win 95+
			</td>
			<td>4
			</td>
			<td>X
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>Internet Explorer 5.0
			</td>
			<td>Win 95+
			</td>
			<td>5
			</td>
			<td>C
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>Internet Explorer 5.5
			</td>
			<td>Win 95+
			</td>
			<td>5.5
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>Internet Explorer 6
			</td>
			<td>Win 98+
			</td>
			<td>6
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>Internet Explorer 7
			</td>
			<td>Win XP SP2+
			</td>
			<td>7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>AOL browser (AOL desktop)
			</td>
			<td>Win XP
			</td>
			<td>6
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 1.0
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 1.5
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 2.0
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 3.0
			</td>
			<td>Win 2k+ / OSX.3+
			</td>
			<td>1.9
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Camino 1.0
			</td>
			<td>OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Camino 1.5
			</td>
			<td>OSX.3+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Netscape 7.2
			</td>
			<td>Win 95+ / Mac OS 8.6-9.2
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Netscape Browser 8
			</td>
			<td>Win 98SE+
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Netscape Navigator 9
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.0
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.1
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.2
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.2
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.3
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.3
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.4
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.4
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.5
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.5
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.6
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.6
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.7
			</td>
			<td>Win 98+ / OSX.1+
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.8
			</td>
			<td>Win 98+ / OSX.1+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Seamonkey 1.1
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Epiphany 2.20
			</td>
			<td>Gnome
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 1.2
			</td>
			<td>OSX.3
			</td>
			<td>125.5
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 1.3
			</td>
			<td>OSX.3
			</td>
			<td>312.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 2.0
			</td>
			<td>OSX.4+
			</td>
			<td>419.3
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 3.0
			</td>
			<td>OSX.4+
			</td>
			<td>522.1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>OmniWeb 5.5
			</td>
			<td>OSX.4+
			</td>
			<td>420
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>iPod Touch / iPhone
			</td>
			<td>iPod
			</td>
			<td>420.1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>S60
			</td>
			<td>S60
			</td>
			<td>413
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 7.0
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 7.5
			</td>
			<td>Win 95+ / OSX.2+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 8.0
			</td>
			<td>Win 95+ / OSX.2+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 8.5
			</td>
			<td>Win 95+ / OSX.2+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 9.0
			</td>
			<td>Win 95+ / OSX.3+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 9.2
			</td>
			<td>Win 88+ / OSX.3+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 9.5
			</td>
			<td>Win 88+ / OSX.3+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera for Wii
			</td>
			<td>Wii
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Nokia N800
			</td>
			<td>N800
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Nintendo DS browser
			</td>
			<td>Nintendo DS
			</td>
			<td>8.5
			</td>
			<td>C/A<sup>1</sup>
			</td>
		</tr>
	</tbody>
</table>



<!-- CSS DATATABLES -->
<link href="assets/css/layout-datatables.css" rel="stylesheet" type="text/css" />


<!-- JS DATATABLES -->
<script type="text/javascript" src="assets/plugins/datatables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="assets/plugins/select2/js/select2.full.min.js"></script>
<script type="text/javascript">
	function initTable3() {
		var table = jQuery('#sample_3');

		/* Formatting function for row expanded details */
		function fnFormatDetails(oTable, nTr) {
			var aData = oTable.fnGetData(nTr);
			var sOut = '';
			sOut += '';
			sOut += '';
			sOut += '';
			sOut += '';
			sOut += '
Platform(s):' + aData[2] + '
Engine version:' + aData[3] + '
CSS grade:' + aData[4] + '
Others:Could provide a link here
';

			return sOut;
		}

		/*
		 * Insert a 'details' column to the table
		 */
		var nCloneTh = document.createElement('th');
		nCloneTh.className = "table-checkbox";
		
		var nCloneTd = document.createElement('td');
		nCloneTd.innerHTML = '';

		table.find('thead tr').each(function () {
			this.insertBefore(nCloneTh, this.childNodes[0]);
		});

		table.find('tbody tr').each(function () {
			this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
		});

		var oTable = table.dataTable({
			"columnDefs": [{
				"orderable": false,
				"targets": [0]
			}],
			"order": [
				[1, 'asc']
			],
			"lengthMenu": [
				[5, 15, 20, -1],
				[5, 15, 20, "All"] // change per page values here
			],
			// set the initial value
			"pageLength": 10,
		});

		var tableWrapper = jQuery('#sample_4_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper
		var tableColumnToggler = jQuery('#sample_4_column_toggler');

		/* modify datatable control inputs */
		tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown

		/* Add event listener for opening and closing details
		 * Note that the indicator for showing which row is open is not controlled by DataTables,
		 * rather it is done here
		 */
		table.on('click', ' tbody td .row-details', function () {
			var nTr = jQuery(this).parents('tr')[0];
			if (oTable.fnIsOpen(nTr)) {
				/* This row is already open - close it */
				jQuery(this).addClass("row-details-close").removeClass("row-details-open");
				oTable.fnClose(nTr);
			} else {
				/* Open this row */
				jQuery(this).addClass("row-details-open").removeClass("row-details-close");
				oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
			}
		});

		/* handle show/hide columns*/
		jQuery('input[type="checkbox"]', tableColumnToggler).change(function () {
			/* Get the DataTables object again - this is not a recreation, just a get of the object */
			var iCol = parseInt(jQuery(this).attr("data-column"));
			var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
			oTable.fnSetColumnVis(iCol, (bVis ? false : true));
		});
	}


	// Table Init
	initTable3();
</script>

Scroller

Rendering engine Browser
Trident Internet Explorer 4.0 Win 95+ 4 X
Trident Internet Explorer 5.0 Win 95+ 5 C
Trident Internet Explorer 5.5 Win 95+ 5.5 A
Trident Internet Explorer 6 Win 98+ 6 A
Trident Internet Explorer 7 Win XP SP2+ 7 A
Trident AOL browser (AOL desktop) Win XP 6 A
Gecko Firefox 1.0 Win 98+ / OSX.2+ 1.7 A
Gecko Firefox 1.5 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 2.0 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 3.0 Win 2k+ / OSX.3+ 1.9 A
Gecko Camino 1.0 OSX.2+ 1.8 A
Gecko Camino 1.5 OSX.3+ 1.8 A
Gecko Netscape 7.2 Win 95+ / Mac OS 8.6-9.2 1.7 A
Gecko Netscape Browser 8 Win 98SE+ 1.7 A
Gecko Netscape Navigator 9 Win 98+ / OSX.2+ 1.8 A
Gecko Mozilla 1.0 Win 95+ / OSX.1+ 1 A
Gecko Mozilla 1.1 Win 95+ / OSX.1+ 1.1 A
Gecko Mozilla 1.2 Win 95+ / OSX.1+ 1.2 A
Gecko Mozilla 1.3 Win 95+ / OSX.1+ 1.3 A
Gecko Mozilla 1.4 Win 95+ / OSX.1+ 1.4 A
Gecko Mozilla 1.5 Win 95+ / OSX.1+ 1.5 A
Gecko Mozilla 1.6 Win 95+ / OSX.1+ 1.6 A
Gecko Mozilla 1.7 Win 98+ / OSX.1+ 1.7 A
Gecko Mozilla 1.8 Win 98+ / OSX.1+ 1.8 A
Gecko Seamonkey 1.1 Win 98+ / OSX.2+ 1.8 A
Gecko Epiphany 2.20 Gnome 1.8 A
Webkit Safari 1.2 OSX.3 125.5 A
Webkit Safari 1.3 OSX.3 312.8 A
Webkit Safari 2.0 OSX.4+ 419.3 A
Webkit Safari 3.0 OSX.4+ 522.1 A
Webkit OmniWeb 5.5 OSX.4+ 420 A
Webkit iPod Touch / iPhone iPod 420.1 A
Webkit S60 S60 413 A
Presto Opera 7.0 Win 95+ / OSX.1+ - A
Presto Opera 7.5 Win 95+ / OSX.2+ - A
Presto Opera 8.0 Win 95+ / OSX.2+ - A
Presto Opera 8.5 Win 95+ / OSX.2+ - A
Presto Opera 9.0 Win 95+ / OSX.3+ - A
Presto Opera 9.2 Win 88+ / OSX.3+ - A
Presto Opera 9.5 Win 88+ / OSX.3+ - A
Presto Opera for Wii Wii - A
Presto Nokia N800 N800 - A
Presto Nintendo DS browser Nintendo DS 8.5 C/A1
Show Code 
<!-- HTML DATATABLES -->
<table class="table table-striped table-hover" id="sample_4">
	<thead>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th class="hidden-xs">Platform(s)</th>
			<th class="hidden-xs">Engine version</th>
			<th class="hidden-xs">CSS grade</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Trident
			</td>
			<td>Internet Explorer 4.0
			</td>
			<td>Win 95+
			</td>
			<td>4
			</td>
			<td>X
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>Internet Explorer 5.0
			</td>
			<td>Win 95+
			</td>
			<td>5
			</td>
			<td>C
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>Internet Explorer 5.5
			</td>
			<td>Win 95+
			</td>
			<td>5.5
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>Internet Explorer 6
			</td>
			<td>Win 98+
			</td>
			<td>6
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>Internet Explorer 7
			</td>
			<td>Win XP SP2+
			</td>
			<td>7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>AOL browser (AOL desktop)
			</td>
			<td>Win XP
			</td>
			<td>6
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 1.0
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 1.5
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 2.0
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 3.0
			</td>
			<td>Win 2k+ / OSX.3+
			</td>
			<td>1.9
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Camino 1.0
			</td>
			<td>OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Camino 1.5
			</td>
			<td>OSX.3+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Netscape 7.2
			</td>
			<td>Win 95+ / Mac OS 8.6-9.2
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Netscape Browser 8
			</td>
			<td>Win 98SE+
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Netscape Navigator 9
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.0
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.1
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.2
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.2
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.3
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.3
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.4
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.4
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.5
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.5
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.6
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.6
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.7
			</td>
			<td>Win 98+ / OSX.1+
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.8
			</td>
			<td>Win 98+ / OSX.1+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Seamonkey 1.1
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Epiphany 2.20
			</td>
			<td>Gnome
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 1.2
			</td>
			<td>OSX.3
			</td>
			<td>125.5
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 1.3
			</td>
			<td>OSX.3
			</td>
			<td>312.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 2.0
			</td>
			<td>OSX.4+
			</td>
			<td>419.3
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 3.0
			</td>
			<td>OSX.4+
			</td>
			<td>522.1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>OmniWeb 5.5
			</td>
			<td>OSX.4+
			</td>
			<td>420
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>iPod Touch / iPhone
			</td>
			<td>iPod
			</td>
			<td>420.1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>S60
			</td>
			<td>S60
			</td>
			<td>413
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 7.0
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 7.5
			</td>
			<td>Win 95+ / OSX.2+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 8.0
			</td>
			<td>Win 95+ / OSX.2+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 8.5
			</td>
			<td>Win 95+ / OSX.2+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 9.0
			</td>
			<td>Win 95+ / OSX.3+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 9.2
			</td>
			<td>Win 88+ / OSX.3+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 9.5
			</td>
			<td>Win 88+ / OSX.3+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera for Wii
			</td>
			<td>Wii
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Nokia N800
			</td>
			<td>N800
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Nintendo DS browser
			</td>
			<td>Nintendo DS
			</td>
			<td>8.5
			</td>
			<td>C/A<sup>1</sup>
			</td>
		</tr>
	</tbody>
</table>


<!-- CSS DATATABLES -->
<link href="assets/css/layout-datatables.css" rel="stylesheet" type="text/css" />


<!-- JS DATATABLES -->
<script type="text/javascript" src="assets/plugins/datatables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="assets/plugins/select2/js/select2.full.min.js"></script>
<script type="text/javascript">
	function initTable4() {

		var table = jQuery('#sample_4');

		/* Fixed header extension: http://datatables.net/extensions/scroller/ */

		var oTable = table.dataTable({
			"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // datatable layout without  horizobtal scroll
			"scrollY": "300",
			"deferRender": true,
			"order": [
				[0, 'asc']
			],
			"lengthMenu": [
				[5, 15, 20, -1],
				[5, 15, 20, "All"] // change per page values here
			],
			"pageLength": 10 // set the initial value            
		});


		var tableWrapper = jQuery('#sample_5_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper
		tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
	}


	// Table Init
	initTable4();
</script>

Columns Reorder (drag & drop column head)

Rendering engine Browser
Trident Internet Explorer 4.0 Win 95+ 4 X
Trident Internet Explorer 5.0 Win 95+ 5 C
Trident Internet Explorer 5.5 Win 95+ 5.5 A
Trident Internet Explorer 6 Win 98+ 6 A
Trident Internet Explorer 7 Win XP SP2+ 7 A
Trident AOL browser (AOL desktop) Win XP 6 A
Gecko Firefox 1.0 Win 98+ / OSX.2+ 1.7 A
Gecko Firefox 1.5 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 2.0 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 3.0 Win 2k+ / OSX.3+ 1.9 A
Gecko Camino 1.0 OSX.2+ 1.8 A
Gecko Camino 1.5 OSX.3+ 1.8 A
Gecko Netscape 7.2 Win 95+ / Mac OS 8.6-9.2 1.7 A
Gecko Netscape Browser 8 Win 98SE+ 1.7 A
Gecko Netscape Navigator 9 Win 98+ / OSX.2+ 1.8 A
Gecko Mozilla 1.0 Win 95+ / OSX.1+ 1 A
Gecko Mozilla 1.1 Win 95+ / OSX.1+ 1.1 A
Gecko Mozilla 1.2 Win 95+ / OSX.1+ 1.2 A
Gecko Mozilla 1.3 Win 95+ / OSX.1+ 1.3 A
Gecko Mozilla 1.4 Win 95+ / OSX.1+ 1.4 A
Gecko Mozilla 1.5 Win 95+ / OSX.1+ 1.5 A
Gecko Mozilla 1.6 Win 95+ / OSX.1+ 1.6 A
Gecko Mozilla 1.7 Win 98+ / OSX.1+ 1.7 A
Gecko Mozilla 1.8 Win 98+ / OSX.1+ 1.8 A
Gecko Seamonkey 1.1 Win 98+ / OSX.2+ 1.8 A
Gecko Epiphany 2.20 Gnome 1.8 A
Webkit Safari 1.2 OSX.3 125.5 A
Webkit Safari 1.3 OSX.3 312.8 A
Webkit Safari 2.0 OSX.4+ 419.3 A
Webkit Safari 3.0 OSX.4+ 522.1 A
Webkit OmniWeb 5.5 OSX.4+ 420 A
Webkit iPod Touch / iPhone iPod 420.1 A
Webkit S60 S60 413 A
Presto Opera 7.0 Win 95+ / OSX.1+ - A
Presto Opera 7.5 Win 95+ / OSX.2+ - A
Presto Opera 8.0 Win 95+ / OSX.2+ - A
Presto Opera 8.5 Win 95+ / OSX.2+ - A
Presto Opera 9.0 Win 95+ / OSX.3+ - A
Presto Opera 9.2 Win 88+ / OSX.3+ - A
Presto Opera 9.5 Win 88+ / OSX.3+ - A
Presto Opera for Wii Wii - A
Presto Nokia N800 N800 - A
Presto Nintendo DS browser Nintendo DS 8.5 C/A1
Show Code 
<!-- HTML DATATABLES -->
<table class="table table-striped table-bordered table-hover" id="sample_5">
	<thead>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th class="hidden-xs">Platform(s)</th>
			<th class="hidden-xs">Engine version</th>
			<th class="hidden-xs">CSS grade</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Trident
			</td>
			<td>Internet Explorer 4.0
			</td>
			<td>Win 95+
			</td>
			<td>4
			</td>
			<td>X
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>Internet Explorer 5.0
			</td>
			<td>Win 95+
			</td>
			<td>5
			</td>
			<td>C
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>Internet Explorer 5.5
			</td>
			<td>Win 95+
			</td>
			<td>5.5
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>Internet Explorer 6
			</td>
			<td>Win 98+
			</td>
			<td>6
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>Internet Explorer 7
			</td>
			<td>Win XP SP2+
			</td>
			<td>7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Trident
			</td>
			<td>AOL browser (AOL desktop)
			</td>
			<td>Win XP
			</td>
			<td>6
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 1.0
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 1.5
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 2.0
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Firefox 3.0
			</td>
			<td>Win 2k+ / OSX.3+
			</td>
			<td>1.9
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Camino 1.0
			</td>
			<td>OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Camino 1.5
			</td>
			<td>OSX.3+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Netscape 7.2
			</td>
			<td>Win 95+ / Mac OS 8.6-9.2
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Netscape Browser 8
			</td>
			<td>Win 98SE+
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Netscape Navigator 9
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.0
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.1
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.2
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.2
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.3
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.3
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.4
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.4
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.5
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.5
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.6
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>1.6
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.7
			</td>
			<td>Win 98+ / OSX.1+
			</td>
			<td>1.7
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Mozilla 1.8
			</td>
			<td>Win 98+ / OSX.1+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Seamonkey 1.1
			</td>
			<td>Win 98+ / OSX.2+
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Gecko
			</td>
			<td>Epiphany 2.20
			</td>
			<td>Gnome
			</td>
			<td>1.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 1.2
			</td>
			<td>OSX.3
			</td>
			<td>125.5
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 1.3
			</td>
			<td>OSX.3
			</td>
			<td>312.8
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 2.0
			</td>
			<td>OSX.4+
			</td>
			<td>419.3
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>Safari 3.0
			</td>
			<td>OSX.4+
			</td>
			<td>522.1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>OmniWeb 5.5
			</td>
			<td>OSX.4+
			</td>
			<td>420
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>iPod Touch / iPhone
			</td>
			<td>iPod
			</td>
			<td>420.1
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Webkit
			</td>
			<td>S60
			</td>
			<td>S60
			</td>
			<td>413
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 7.0
			</td>
			<td>Win 95+ / OSX.1+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 7.5
			</td>
			<td>Win 95+ / OSX.2+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 8.0
			</td>
			<td>Win 95+ / OSX.2+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 8.5
			</td>
			<td>Win 95+ / OSX.2+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 9.0
			</td>
			<td>Win 95+ / OSX.3+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 9.2
			</td>
			<td>Win 88+ / OSX.3+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera 9.5
			</td>
			<td>Win 88+ / OSX.3+
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Opera for Wii
			</td>
			<td>Wii
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Nokia N800
			</td>
			<td>N800
			</td>
			<td>-
			</td>
			<td>A
			</td>
		</tr>
		<tr>
			<td>Presto
			</td>
			<td>Nintendo DS browser
			</td>
			<td>Nintendo DS
			</td>
			<td>8.5
			</td>
			<td>C/A<sup>1</sup>
			</td>
		</tr>
	</tbody>
</table>





<!-- CSS DATATABLES -->
<link href="assets/css/layout-datatables.css" rel="stylesheet" type="text/css" />


<!-- JS DATATABLES -->
<script type="text/javascript" src="assets/plugins/datatables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="assets/plugins/select2/js/select2.full.min.js"></script>
<script type="text/javascript">
	function initTable5() {

		var table = jQuery('#sample_5');

		/* Fixed header extension: http://datatables.net/extensions/keytable/ */

		var oTable = table.dataTable({
			"order": [
				[0, 'asc']
			],
			"lengthMenu": [
				[5, 15, 20, -1],
				[5, 15, 20, "All"] // change per page values here
			],
			"pageLength": 10, // set the initial value,
			"columnDefs": [{  // set default column settings
				'orderable': false,
				'targets': [0]
			}, {
				"searchable": false,
				"targets": [0]
			}],
			"order": [
				[1, "asc"]
			]           
		});

		var oTableColReorder = new $.fn.dataTable.ColReorder( oTable );

		var tableWrapper = jQuery('#sample_6_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper
		tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
	}


	// Table Init
	initTable5();
</script>

Managed Datatable

Username Email Points Joined Status
shuxer shuxer@gmail.com 120 12 Jan 2012 Approved
looper looper90@gmail.com 120 12.12.2011 Suspended
userwow userwow@yahoo.com 20 12.12.2012 Approved
user1wow userwow@gmail.com 20 12.12.2012 Blocked
restest test@gmail.com 20 12.12.2012 Approved
foopl good@gmail.com 20 19.11.2010 Approved
weep good@gmail.com 20 19.11.2010 Approved
coop good@gmail.com 20 19.11.2010 Approved
pppol good@gmail.com 20 19.11.2010 Approved
test good@gmail.com 20 19.11.2010 Approved
userwow userwow@gmail.com 20 12.12.2012 Blocked
test test@gmail.com 20 12.12.2012 Approved
goop good@gmail.com 20 12.11.2010 Approved
weep good@gmail.com 20 15.11.2011 Blocked
toopl good@gmail.com 20 16.11.2010 Approved
userwow userwow@gmail.com 20 9.12.2012 Blocked
tes21t test@gmail.com 20 14.12.2012 Approved
fop good@gmail.com 20 13.11.2010 Suspended
kop good@gmail.com 20 17.11.2010 Approved
vopl good@gmail.com 20 19.11.2010 Approved
userwow userwow@gmail.com 20 12.12.2012 Blocked
wap test@gmail.com 20 12.12.2012 Approved
test good@gmail.com 20 19.12.2010 Approved
toop good@gmail.com 20 17.12.2010 Approved
weep good@gmail.com 20 15.11.2011 Approved
Show Code 
<!-- HTML DATATABLES -->
<table class="table table-striped table-bordered table-hover" id="datatable_sample">
	<thead>
		<tr>
			<th class="table-checkbox">
				<input type="checkbox" class="group-checkable" data-set="#datatable_sample .checkboxes"/>
			</th>
			<th>Username</th>
			<th>Email</th>
			<th>Points</th>
			<th>Joined</th>
			<th>Status</th>
		</tr>
	</thead>

	<tbody>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td>shuxer
			</td>
			<td><a href="mailto:shuxer@gmail.com">
				shuxer@gmail.com </a>
			</td>
			<td> 120
			</td>
			<td class="center">
				 12 Jan 2012
			</td>
			<td><span class="label label-sm label-success">
				Approved </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> looper
			</td>
			<td><a href="mailto:looper90@gmail.com">
				looper90@gmail.com </a>
			</td>
			<td> 120
			</td>
			<td class="center">
				 12.12.2011
			</td>
			<td><span class="label label-sm label-warning">
				Suspended </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> userwow
			</td>
			<td><a href="mailto:userwow@yahoo.com">
				userwow@yahoo.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 12.12.2012
			</td>
			<td><span class="label label-sm label-success">
				Approved </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> user1wow
			</td>
			<td><a href="mailto:userwow@gmail.com">
				userwow@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 12.12.2012
			</td>
			<td><span class="label label-sm label-default">
				Blocked </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> restest
			</td>
			<td><a href="mailto:userwow@gmail.com">
				test@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 12.12.2012
			</td>
			<td><span class="label label-sm label-success">
				Approved </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> foopl
			</td>
			<td><a href="mailto:userwow@gmail.com">
				good@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 19.11.2010
			</td>
			<td><span class="label label-sm label-success">
				Approved </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> weep
			</td>
			<td><a href="mailto:userwow@gmail.com">
				good@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 19.11.2010
			</td>
			<td><span class="label label-sm label-success">
				Approved </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> coop
			</td>
			<td><a href="mailto:userwow@gmail.com">
				good@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 19.11.2010
			</td>
			<td><span class="label label-sm label-success">
				Approved </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> pppol
			</td>
			<td><a href="mailto:userwow@gmail.com">
				good@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 19.11.2010
			</td>
			<td><span class="label label-sm label-success">
				Approved </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> test
			</td>
			<td><a href="mailto:userwow@gmail.com">
				good@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 19.11.2010
			</td>
			<td><span class="label label-sm label-success">
				Approved </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> userwow
			</td>
			<td><a href="mailto:userwow@gmail.com">
				userwow@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 12.12.2012
			</td>
			<td><span class="label label-sm label-default">
				Blocked </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> test
			</td>
			<td><a href="mailto:userwow@gmail.com">
				test@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 12.12.2012
			</td>
			<td><span class="label label-sm label-success">
				Approved </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> goop
			</td>
			<td><a href="mailto:userwow@gmail.com">
				good@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 12.11.2010
			</td>
			<td><span class="label label-sm label-success">
				Approved </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> weep
			</td>
			<td><a href="mailto:userwow@gmail.com">
				good@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 15.11.2011
			</td>
			<td><span class="label label-sm label-default">
				Blocked </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> toopl
			</td>
			<td><a href="mailto:userwow@gmail.com">
				good@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 16.11.2010
			</td>
			<td><span class="label label-sm label-success">
				Approved </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> userwow
			</td>
			<td><a href="mailto:userwow@gmail.com">
				userwow@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 9.12.2012
			</td>
			<td><span class="label label-sm label-default">
				Blocked </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> tes21t
			</td>
			<td><a href="mailto:userwow@gmail.com">
				test@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 14.12.2012
			</td>
			<td><span class="label label-sm label-success">
				Approved </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> fop
			</td>
			<td><a href="mailto:userwow@gmail.com">
				good@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 13.11.2010
			</td>
			<td><span class="label label-sm label-warning">
				Suspended </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> kop
			</td>
			<td><a href="mailto:userwow@gmail.com">
				good@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 17.11.2010
			</td>
			<td><span class="label label-sm label-success">
				Approved </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> vopl
			</td>
			<td><a href="mailto:userwow@gmail.com">
				good@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 19.11.2010
			</td>
			<td><span class="label label-sm label-success">
				Approved </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> userwow
			</td>
			<td><a href="mailto:userwow@gmail.com">
				userwow@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 12.12.2012
			</td>
			<td><span class="label label-sm label-default">
				Blocked </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> wap
			</td>
			<td><a href="mailto:userwow@gmail.com">
				test@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 12.12.2012
			</td>
			<td><span class="label label-sm label-success">
				Approved </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> test
			</td>
			<td><a href="mailto:userwow@gmail.com">
				good@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 19.12.2010
			</td>
			<td><span class="label label-sm label-success">
				Approved </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> toop
			</td>
			<td><a href="mailto:userwow@gmail.com">
				good@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 17.12.2010
			</td>
			<td><span class="label label-sm label-success">
				Approved </span>
			</td>
		</tr>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="checkboxes" value="1"/>
			</td>
			<td> weep
			</td>
			<td><a href="mailto:userwow@gmail.com">
				good@gmail.com </a>
			</td>
			<td> 20
			</td>
			<td class="center">
				 15.11.2011
			</td>
			<td><span class="label label-sm label-success">
				Approved </span>
			</td>
		</tr>
	</tbody>
</table>







<!-- CSS DATATABLES -->
<link href="assets/css/layout-datatables.css" rel="stylesheet" type="text/css" />


<!-- JS DATATABLES -->
loadScript(plugin_path + "jquery-datatables/js/jquery.dataTables.min.js", function(){
	loadScript(plugin_path + "jquery-datatables/dataTables.bootstrap.js", function(){

		if (jQuery().dataTable) {

			var table = jQuery('#datatable_sample');
			table.dataTable({
				"columns": [{
					"orderable": false
				}, {
					"orderable": true
				}, {
					"orderable": false
				}, {
					"orderable": false
				}, {
					"orderable": true
				}, {
					"orderable": false
				}],
				"lengthMenu": [
					[5, 15, 20, -1],
					[5, 15, 20, "All"] // change per page values here
				],
				// set the initial value
				"pageLength": 5,            
				"pagingType": "bootstrap_full_number",
				"language": {
					"lengthMenu": "  _MENU_ records",
					"paginate": {
						"previous":"Prev",
						"next": "Next",
						"last": "Last",
						"first": "First"
					}
				},
				"columnDefs": [{  // set default column settings
					'orderable': false,
					'targets': [0]
				}, {
					"searchable": false,
					"targets": [0]
				}],
				"order": [
					[1, "asc"]
				] // set first column as a default sort by asc
			});

			var tableWrapper = jQuery('#datatable_sample_wrapper');

			table.find('.group-checkable').change(function () {
				var set = jQuery(this).attr("data-set");
				var checked = jQuery(this).is(":checked");
				jQuery(set).each(function () {
					if (checked) {
						jQuery(this).attr("checked", true);
						jQuery(this).parents('tr').addClass("active");
					} else {
						jQuery(this).attr("checked", false);
						jQuery(this).parents('tr').removeClass("active");
					}
				});
				jQuery.uniform.update(set);
			});

			table.on('change', 'tbody tr .checkboxes', function () {
				jQuery(this).parents('tr').toggleClass("active");
			});

			tableWrapper.find('.dataTables_length select').addClass("form-control input-xsmall input-inline"); // modify table per page dropdown

		}

	});
});
</script>

Editable Datatable

Username Full Name Points Notes Edit Delete
alex Alex Nilson 1234 power user Edit Delete
lisa Lisa Wong 434 new user Edit Delete
nick12 Nick Roberts 232 power user Edit Delete
goldweb Sergio Jackson 132 elite user Edit Delete
webriver Antonio Sanches 462 new user Edit Delete
gist124 Nick Roberts 62 new user Edit Delete
Show Code 
<!-- HTML DATATABLES -->
<table class="table table-striped table-hover table-bordered" id="sample_editable_1">
<thead>
	<tr>
		<th>Username</th>
		<th>Full Name</th>
		<th>Points</th>
		<th>Notes</th>
		<th>Edit</th>
		<th>Delete</th>
	</tr>
</thead>

<tbody>
	<tr>
		<td>
			 alex
		</td>
		<td>
			 Alex Nilson
		</td>
		<td>
			 1234
		</td>
		<td class="center">
			 power user
		</td>
		<td>
			<a class="edit" href="javascript:;">
			Edit </a>
		</td>
		<td>
			<a class="delete" href="javascript:;">
			Delete </a>
		</td>
	</tr>
	<tr>
		<td>
			 lisa
		</td>
		<td>
			 Lisa Wong
		</td>
		<td>
			 434
		</td>
		<td class="center">
			 new user
		</td>
		<td>
			<a class="edit" href="javascript:;">
			Edit </a>
		</td>
		<td>
			<a class="delete" href="javascript:;">
			Delete </a>
		</td>
	</tr>
	<tr>
		<td>
			 nick12
		</td>
		<td>
			 Nick Roberts
		</td>
		<td>
			 232
		</td>
		<td class="center">
			 power user
		</td>
		<td>
			<a class="edit" href="javascript:;">
			Edit </a>
		</td>
		<td>
			<a class="delete" href="javascript:;">
			Delete </a>
		</td>
	</tr>
	<tr>
		<td>
			 goldweb
		</td>
		<td>
			 Sergio Jackson
		</td>
		<td>
			 132
		</td>
		<td class="center">
			 elite user
		</td>
		<td>
			<a class="edit" href="javascript:;">
			Edit </a>
		</td>
		<td>
			<a class="delete" href="javascript:;">
			Delete </a>
		</td>
	</tr>
	<tr>
		<td>
			 webriver
		</td>
		<td>
			 Antonio Sanches
		</td>
		<td>
			 462
		</td>
		<td class="center">
			 new user
		</td>
		<td>
			<a class="edit" href="javascript:;">
			Edit </a>
		</td>
		<td>
			<a class="delete" href="javascript:;">
			Delete </a>
		</td>
	</tr>
	<tr>
		<td>
			 gist124
		</td>
		<td>
			 Nick Roberts
		</td>
		<td>
			 62
		</td>
		<td class="center">
			 new user
		</td>
		<td>
			<a class="edit" href="javascript:;">
			Edit </a>
		</td>
		<td>
			<a class="delete" href="javascript:;">
			Delete </a>
		</td>
	</tr>
</tbody>
</table>




<!-- CSS DATATABLES -->
<link href="assets/css/layout-datatables.css" rel="stylesheet" type="text/css" />


<!-- JS DATATABLES -->
<script type="text/javascript" src="assets/plugins/datatables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="assets/plugins/select2/js/select2.full.min.js"></script>
<script type="text/javascript">
	function initTable7() {

		function restoreRow(oTable, nRow) {
			var aData = oTable.fnGetData(nRow);
			var jqTds = $('>td', nRow);

			for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
				oTable.fnUpdate(aData[i], nRow, i, false);
			}

			oTable.fnDraw();
		}

		function editRow(oTable, nRow) {
			var aData = oTable.fnGetData(nRow);
			var jqTds = $('>td', nRow);
			jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '">';
			jqTds[1].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[1] + '">';
			jqTds[2].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[2] + '">';
			jqTds[3].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[3] + '">';
			jqTds[4].innerHTML = '<a class="edit" href="">Save';
			jqTds[5].innerHTML = '<a class="cancel" href="">Cancel';
		}

		function saveRow(oTable, nRow) {
			var jqInputs = $('input', nRow);
			oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
			oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
			oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
			oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
			oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false);
			oTable.fnUpdate('<a class="delete" href="">Delete</a>', nRow, 5, false);
			oTable.fnDraw();
		}

		function cancelEditRow(oTable, nRow) {
			var jqInputs = $('input', nRow);
			oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
			oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
			oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
			oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
			oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false);
			oTable.fnDraw();
		}

		var table = $('#sample_editable_1');

		var oTable = table.dataTable({
			"lengthMenu": [
				[5, 15, 20, -1],
				[5, 15, 20, "All"] // change per page values here
			],
			// set the initial value
			"pageLength": 10,

			"language": {
				"lengthMenu": " _MENU_ records"
			},
			"columnDefs": [{ // set default column settings
				'orderable': true,
				'targets': [0]
			}, {
				"searchable": true,
				"targets": [0]
			}],
			"order": [
				[0, "asc"]
			] // set first column as a default sort by asc
		});

		var tableWrapper = $("#sample_editable_1_wrapper");

		tableWrapper.find(".dataTables_length select").select2({
			showSearchInput: false //hide search box with special css class
		}); // initialize select2 dropdown

		var nEditing = null;
		var nNew = false;

		$('#sample_editable_1_new').click(function (e) {
			e.preventDefault();

			if (nNew && nEditing) {
				if (confirm("Previose row not saved. Do you want to save it ?")) {
					saveRow(oTable, nEditing); // save
					$(nEditing).find("td:first").html("Untitled");
					nEditing = null;
					nNew = false;

				} else {
					oTable.fnDeleteRow(nEditing); // cancel
					nEditing = null;
					nNew = false;
					
					return;
				}
			}

			var aiNew = oTable.fnAddData(['', '', '', '', '', '']);
			var nRow = oTable.fnGetNodes(aiNew[0]);
			editRow(oTable, nRow);
			nEditing = nRow;
			nNew = true;
		});

		table.on('click', '.delete', function (e) {
			e.preventDefault();

			if (confirm("Are you sure to delete this row ?") == false) {
				return;
			}

			var nRow = $(this).parents('tr')[0];
			oTable.fnDeleteRow(nRow);
			alert("Deleted! Do not forget to do some ajax to sync with backend :)");
		});

		table.on('click', '.cancel', function (e) {
			e.preventDefault();

			if (nNew) {
				oTable.fnDeleteRow(nEditing);
				nNew = false;
			} else {
				restoreRow(oTable, nEditing);
				nEditing = null;
			}
		});

		table.on('click', '.edit', function (e) {
			e.preventDefault();

			/* Get the row as a parent of the link that was clicked on */
			var nRow = $(this).parents('tr')[0];

			if (nEditing !== null && nEditing != nRow) {
				/* Currently editing - but not this row - restore the old before continuing to edit mode */
				restoreRow(oTable, nEditing);
				editRow(oTable, nRow);
				nEditing = nRow;
			} else if (nEditing == nRow && this.innerHTML == "Save") {
				/* Editing this row and want to save it */
				saveRow(oTable, nEditing);
				nEditing = null;
				alert("Updated! Do not forget to do some ajax to sync with backend :)");
			} else {
				/* No edit in progress - let's start one */
				editRow(oTable, nRow);
				nEditing = nRow;
			}
		});

	}



	// Table Init
	initTable7();
</script>