FineAdmin.Web/Content/lib/datatables/extensions/ColReorder/examples/initialisation/simple.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>ColReorder example - Basic initialisation</title>
	<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
	<link rel="stylesheet" type="text/css" href="../../css/colReorder.dataTables.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="//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="../../js/dataTables.colReorder.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( {
		colReorder: true
	} );
} );


	</script>
</head>
<body class="dt-example">
	<div class="container">
		<section>
			<h1>ColReorder example <span>Basic initialisation</span></h1>
			<div class="info">
				<p>This example shows the basic use case of the ColReorder plug-in. With ColReorder enabled for a table, the user has the ability to click and drag any table
				header cell, and drop it where they wish the column to be inserted. The insert point is shown visually, and the column reordering is done as soon as the mouse
				button is released.</p>
				<p>ColReorder is added to a DataTable through the <a href="//datatables.net/reference/option/colReorder"><code class="option" title=
				"ColReorder initialisation option">colReorder</code></a> initialisation option which can be set to <code>true</code> to use the default options for ColReorder (as
				shown in this example) or used as an object to set options, as shown in other examples.</p>
			</div>
			<div class="demo-html"></div>
			<table id="example" class="display" 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>
					</tr>
				</thead>