school-administrarion/assets/plugin/datatables/extensions/Scroller/examples/initialisation/fixedColumns.html

212 lines
8.0 KiB
HTML
Executable File

<!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>Scroller example - FixedColumns integration</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../FixedColumns/css/fixedColumns.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/scroller.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">
/* For this example, force x-scrolling by making the table width smaller */
div.dataTables_wrapper {
width: 75%;
margin: 0 auto;
}
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../../FixedColumns/js/dataTables.fixedColumns.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.scroller.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() {
var table = $('#example').DataTable( {
ajax: "../data/2500.txt",
deferRender: true,
scrollY: 200,
scrollX: true,
scrollCollapse: true,
scroller: true
} );
new $.fn.dataTable.FixedColumns( table );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Scroller example <span>FixedColumns integration</span></h1>
<div class="info">
<p>This example shows Scroller operating with <a href="//datatables.net/extensions/fixedcolumns">FixedColumns</a>. FixedColumns has the ability to "freeze" columns
and the left and right of a scrolling table in place. Initialisation is exactly the same as normal and all of the standard options are available for both
FixedColumns and Scroller. They will automatically detect if they are being used together.</p>
<p>You may need to resize your browser window to force the table to scroll horizontally with this example!</p>
</div>
<table id="example" class="stripe row-border order-column nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>First name</th>
<th>Last name</th>
<th>ZIP / Post code</th>
<th>Country</th>
</tr>
</thead>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var table = $('#example').DataTable( {
ajax: &quot;../data/2500.txt&quot;,
deferRender: true,
scrollY: 200,
scrollX: true,
scrollCollapse: true,
scroller: true
} );
new $.fn.dataTable.FixedColumns( table );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
</li>
<li>
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
</li>
<li>
<a href="../../../FixedColumns/js/dataTables.fixedColumns.js">../../../FixedColumns/js/dataTables.fixedColumns.js</a>
</li>
<li>
<a href="../../js/dataTables.scroller.js">../../js/dataTables.scroller.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css">/* For this example, force x-scrolling by making the table width smaller */
div.dataTables_wrapper {
width: 75%;
margin: 0 auto;
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="../../../FixedColumns/css/fixedColumns.dataTables.css">../../../FixedColumns/css/fixedColumns.dataTables.css</a>
</li>
<li>
<a href="../../css/scroller.dataTables.css">../../css/scroller.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Initialisation</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Basic initialisation</a>
</li>
<li>
<a href="./state_saving.html">State saving</a>
</li>
<li>
<a href="./large_js_source.html">Client-side data source (50,000 rows)</a>
</li>
<li>
<a href="./server-side_processing.html">Server-side processing (5,000,000 rows)</a>
</li>
<li>
<a href="./api_scrolling.html">API</a>
</li>
<li class="active">
<a href="./fixedColumns.html">FixedColumns integration</a>
</li>
<li>
<a href="./select.html">Select integration</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/bootstrap.html">Bootstrap</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryui.html">jQuery UI</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>