FineAdmin.Web/Content/lib/datatables/examples/advanced_init/dom_toolbar.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 - Custom toolbar elements</title>
	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.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">
	

.toolbar {
	float: left;
}


	</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="../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( {
		"dom": '<"toolbar">frtip'
	} );

	$("div.toolbar").html('<b>Custom tool bar! Text/images etc.</b>');
} );


	</script>
</head>
<body class="dt-example">
	<div class="container">
		<section>
			<h1>DataTables example <span>Custom toolbar elements</span></h1>
			<div class="info">
				<p>DataTables inserts DOM elements around the table to control DataTables features, and you can make use of this mechanism as well to insert your own custom
				elements. In this example a <code class="tag" title="HTML tag">div</code> with a class of '-string toolbar' is created using <a href=
				"//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a>, and jQuery then used to insert HTML into that
				element to create the toolbar. You could put whatever HTML you want into the toolbar!</p>
				<p>For more complex features, or for creating reusable plug-ins, DataTables also has a feature plug-in API available, which can be used to create plug-ins which
				are used in a table by a single character reference in the <a href="//datatables.net/reference/option/dom"><code class="option" title=
				"DataTables initialisation option">dom</code></a> option (like the built in option of <code class="string" title="String">f</code> refers to 'filtering input', you
				could have an <code class="string" title="String">F</code> option which creates your own filtering input control, custom to your app).</p>
				<p>There are a number of <a href="//datatables.net/extensions">extensions for DataTables</a> that make use of this ability. For example, <a href=
				"//datatables.net/extensions/buttons">Buttons</a> is a feature plug-in for DataTables that adds buttons into a toolbar for a table (copy to clipboard, save to
				Excel / PDF, and more).</p>
			</div>
			<div class="demo-html"></div>
			<table id="example" class="display" cellspacing="0" width="100%">