SimpleTaskSystem.Web/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/datatables/extensions/Responsive/examples/display-control/auto.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">

	<title>Responsive example - Automatic column hiding</title>
	<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
	<link rel="stylesheet" type="text/css" href="../../css/dataTables.responsive.css">
	<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
	<link rel="stylesheet" type="text/css" href="../../../../examples/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="../../js/dataTables.responsive.js"></script>
	<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js"></script>
	<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js"></script>
	<script type="text/javascript" language="javascript" class="init">



$(document).ready(function() {
	$('#example').DataTable();
} );



	</script>
</head>

<body class="dt-example">
	<div class="container">
		<section>
			<h1>Responsive example <span>Automatic column hiding</span></h1>

			<div class="info">
				<p>Responsive will automatically detect which columns have breakpoint class names assigned to them for visibility control. If no breakpoint class is found for a
				column, Responsive will determine automatically if the column should be shown or not at any particular viewport width. This is done by removing columns which cause
				the table to overflow the viewport, with the columns being removed from the right.</p>

				<p>This example shows that simple case. On a desktop browser resize the window horizontally to see columns added and removed on-the-fly. On a tablet or mobile
				browser, change the screen's orientation.</p>
			</div>

			<table id="example" class="display responsive nowrap" cellspacing="0" width="100%">
				<thead>
					<tr>
						<th>First name</th>
						<th>Last name</th>
						<th>Position</th>
						<th>Office</th>
						<th>Age</th>
						<th>Start date</th>
						<th>Salary</th>
						<th>Extn.</th>
						<th>E-mail</th>
					</tr>