Nate
/
BIM-Monitor


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
							<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>Datatables</title>
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
		<link rel="stylesheet" href="css/datatables.css">
	</head>
	<body>
		<div class="jumbotron">
			<div class="container">
				<h1>Bootstrap3 plugin for datatable</h1>
				<p>This plugin adds tweaks for datatable UI to render correctly.</p>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="panel panel-success">
					<div class="panel-heading">Files & Code</div>
					<div class="panel-body">
						&lt;link rel="stylesheet" href="css/datatables.css"&gt;<br>
						&lt;script src="js/datatables.js"&gt;&lt;/script&gt;<br><br>

						// Html code <br>
						&lt;table class="datatable table table-striped table-bordered"&gt;<br>
						&lt;/table&gt;<br><br>
						// Javascript code <br>
						$('.datatable').dataTable();<br>
						$('.datatable').each(function(){<br>
						&nbsp;&nbsp;&nbsp;&nbsp;var datatable = $(this);<br>
						&nbsp;&nbsp;&nbsp;&nbsp;var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');<br>
						&nbsp;&nbsp;&nbsp;&nbsp;search_input.attr('placeholder', 'Search');<br>
						&nbsp;&nbsp;&nbsp;&nbsp;search_input.addClass('form-control input-sm');<br>
						&nbsp;&nbsp;&nbsp;&nbsp;var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');<br>
						&nbsp;&nbsp;&nbsp;&nbsp;length_sel.addClass('form-control input-sm');<br>
						});<br>
					</div>
				</div>
				<div class="panel panel-primary">
					<div class="panel-heading">Pagination types</div>
					<div class="panel-body">
						<div class="col-sm-3">
							<code>
								$('.datatable').dataTable({<br>
								"sPaginationType": "bs_normal"<br>
								});
							</code>
							<p><a class="btn btn-primary" href="examples/pagination_normal.html" target="_blank">View Default &raquo;</a></p>
						</div>
						<div class="col-sm-3">
							<code>
								$('.datatable').dataTable({<br>
								"sPaginationType": "bs_two_button"<br>
								});
							</code>
							<p><a class="btn btn-primary" href="examples/pagination_two_buttons.html" target="_blank">View Two buttons &raquo;</a></p>
						</div>
						<div class="col-sm-3">
							<code>
								$('.datatable').dataTable({<br>
								"sPaginationType": "bs_four_button"<br>
								});
							</code>
							<p><a class="btn btn-primary" href="examples/pagination_four_buttons.html" target="_blank">View Four buttons &raquo;</a></p>
						</div>
						<div class="col-sm-3">
							<code>
								$('.datatable').dataTable({<br>
								"sPaginationType": "bs_full"<br>
								});
							</code>
							<p><a class="btn btn-primary" href="examples/pagination_full.html" target="_blank">View Complete &raquo;</a></p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
	</body>
</html>