school-administrarion/assets/plugin/datatables/extensions/Select/examples/initialisation/reload.html

272 lines
10 KiB
HTML
Raw Permalink Normal View History

2024-05-07 19:49:43 +00:00
<!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 - Retain selection on reload</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/select.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../Buttons/css/buttons.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.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.select.js">
</script>
<script type="text/javascript" language="javascript" src="../../../Buttons/js/dataTables.buttons.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: '../../../../examples/ajax/data/objects.txt',
deferRender: true,
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'extn' },
{ data: 'start_date' },
{ data: 'salary' }
],
rowId: 'extn',
select: true,
dom: 'Bfrtip',
buttons: [
{
text: 'Reload table',
action: function () {
table.ajax.reload();
}
}
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Retain selection on reload</span></h1>
<div class="info">
<p>DataTables has the ability to use a property in the data source for each row as that row's unique identifier through the <a href=
"//datatables.net/reference/option/rowId"><code class="option" title="DataTables initialisation option">rowId</code></a> option. This is typically used in
DataTables to assign an <code>id</code> attribute to the <code class="tag" title="HTML tag">tr</code> elements in the table, but it can also be used by Select and
other libraries to retain a unique identifier for each row over data reloads.</p>
<p>Select uses this information to be able to retain row selection over a data reload. Generally, if a table is reloaded, the state of each row is lost (since the
old rows are deleted and new rows added), but this can be undesirable, particularly if performing frequent data updates. Setting the <a href=
"//datatables.net/reference/option/rowId"><code class="option" title="DataTables initialisation option">rowId</code></a> option of DataTables will address
this.</p>
<p>This example uses the <code>extn</code> property of the row as the <a href="//datatables.net/reference/option/rowId"><code class="option" title=
"DataTables initialisation option">rowId</code></a> option (normally a database primary key might be used). A reload button is also available through the <a href=
"https://datatables.net/extensions/buttons">Buttons extension</a> which will call the <a href="//datatables.net/reference/api/ajax.reload()"><code class="api"
title="DataTables API method">ajax.reload()</code></a> method when activated.</p>
<p>To demonstrate Select's ability to retain the selected rows over a data reload, select a number of rows and then click the <em>Reload table</em> button.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</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: '../../../../examples/ajax/data/objects.txt',
deferRender: true,
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'extn' },
{ data: 'start_date' },
{ data: 'salary' }
],
rowId: 'extn',
select: true,
dom: 'Bfrtip',
buttons: [
{
text: 'Reload table',
action: function () {
table.ajax.reload();
}
}
]
} );
} );</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="../../js/dataTables.select.js">../../js/dataTables.select.js</a>
</li>
<li>
<a href="../../../Buttons/js/dataTables.buttons.js">../../../Buttons/js/dataTables.buttons.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"></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="../../css/select.dataTables.css">../../css/select.dataTables.css</a>
</li>
<li>
<a href="../../../Buttons/css/buttons.dataTables.css">../../../Buttons/css/buttons.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">Simple initialisation</a>
</li>
<li>
<a href="./single.html">Single item selection</a>
</li>
<li>
<a href="./multi.html">Multi item selection</a>
</li>
<li>
<a href="./cells.html">Cell selection</a>
</li>
<li>
<a href="./checkbox.html">Checkbox selection</a>
</li>
<li>
<a href="./i18n.html">Internationalisation</a>
</li>
<li>
<a href="./blurable.html">Blur selection</a>
</li>
<li>
<a href="./deferRender.html">Defer rendering</a>
</li>
<li>
<a href="./buttons.html">Buttons</a>
</li>
<li class="active">
<a href="./reload.html">Retain selection on reload</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 class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/get.html">Get selected items</a>
</li>
<li>
<a href="../api/select.html">Select items</a>
</li>
<li>
<a href="../api/events.html">Events</a>
</li>
<li>
<a href="../api/cancellableEvents.html">Events (cancellable)</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>