MVC_CRUD/Scripts/datatable/examples/styling/material.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>DataTables example - Material Design (Tech. preview)</title>
	<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.0/material.min.css">
	<link rel="stylesheet" type="text/css" href="../../media/css/dataTables.material.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="//code.jquery.com/jquery-1.12.4.js">
	</script>
	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
	</script>
	<script type="text/javascript" language="javascript" src="../../media/js/dataTables.material.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( {
		columnDefs: [
			{
				targets: [ 0, 1, 2 ],
				className: 'mdl-data-table__cell--non-numeric'
			}
		]
	} );
} );

	</script>
</head>
<body class="dt-example dt-example-material">
	<div class="container">
		<section>
			<h1>DataTables example <span>Material Design (Tech. preview)</span></h1>
			<div class="info">
				<p>This example shows DataTables styled for <a href="https://www.google.com/design/spec/material-design/">Google's Material Design</a>. The <a href=
				"http://getmdl.io/">Material Design Lite</a> libraries are used to provide the styling implementation for Material.</p>
				<p>This is a technical preview example and the Material Design integration for DataTables is not yet complete. This tech preview is provided to gauge the interest
				in a Material integration for DataTables and also to estimate the work that would be involved in fully supporting the styling library. As such, the Material design
				implementation for DataTables can currently only be installed from source and is not available in package managers or the DataTables downloader.</p>
			</div>
			<div class="demo-html"></div>
			<table id="example" class="mdl-data-table" cellspacing="0" width="100%">
				<thead>
					<tr>
						<th>Name</th>
						<th>Position</th>
						<th>Office</th>
						<th>Age</th>
						<th>Start date</th>
						<th>Salary</th>